javascript - 通过 jQuery 或 JavaScript 添加到 DOM 的元素的渲染顺序

Question

如果我有 2 个完全相同的固定位置 div 元素，并通过 jQuery 或 JavaScript 将它们添加到 DOM，我期望哪个元素会出现在顶部？

例如:

div#a {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    height: 100px;
    background-color: red;
}

div#b {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    height: 100px;
    background-color: red;
}

我的问题的原因是在测试过程中，我添加的 div 首先出现在顶部。我本希望添加的第二个 div 出现在顶部。

更新:请注意，我已经了解 z-index。请引用具有完全相同(默认)z-index 的 div#a 和 div#b 来考虑我的问题。添加到 DOM 后哪个会出现在顶部？

我的 jQuery

$( 'body' ).append( '<div id="a"></div>' );
$( 'body' ).append( '<div id="b"></div>' );

Answer 1

您应该使用 css 样式的 z-index 属性来设置元素的堆叠顺序。z-index 较大的元素始终位于 z-index 较小的元素前面。在您的示例中:

div#a {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    height: 100px;
    background-color: red;
    z-index: 1;
}

div#b {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    height: 100px;
    background-color: red;
    z-index: 2;
}