javascript - 反转 HTML 元素中子项的默认 z-index

Question

所以， spec 定义元素是“按树顺序”绘制的，用于类似 block 级别或 float 状态和相同 z 的流入、非定位元素-索引。当然，这意味着在 HTML 标记中最后声明的那些被绘制在最上面。但是，如果我们希望为特定容器中的任意 子元素颠倒该顺序怎么办？

例如，假设我们在父 div 中有无限数量的重叠 float div:

__________________________________
|  _________________________      |
|  | samant| allis| rachael |...  |
|  |_______|______|_________|...  |
|_________________________________|

我们希望看起来像这样:

__________________________________
|  _________________________      |
|  | samantha |lison |chael |...  |
|  |__________|______|______|...  |
|_________________________________|

jsfiddle

难道光靠css还是不行吗？如果没有，使用 javascript 为任意子元素实现此功能的最有效和安全的方法是什么？

之前已经针对类似的功能询问过问题，但不是专门用于在一般意义上使用任意数量的子元素。参见 here 和 here .

Answer 1

一个简单的 javascript 解决方案是使用 querySelectorAll 获取所有元素, 然后 forEach并将 z-index 设置为元素计数 - 当前索引:

var elems = document.querySelectorAll(".container2 .floater");
Array.prototype.forEach.call(elems, function(e, i) {
    e.style.zIndex = elems.length - i;
});

.container2 {
    border: 3px solid teal;
    padding: 2em;
    display:inline-block
}


.container2 .floater {
    border: 1px solid gray;
    background: #444;
    color: white;
    float: left;
    padding: 1em;
    margin: -1em;
    position: relative;
}

<div class="container2">
    <div class="floater">Item 1</div>
    <div class="floater">Item 2</div>
    <div class="floater">Item 3</div>
    <div class="floater">Item 4</div>
    <div class="floater">Item 5</div>
    <div class="floater">Item 6</div>
</div>