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

Question

因此,规范定义了元素是按照树的顺序绘制的,用于具有相似block级别或float状态且相同的流入的非定位元素z-index.当然,这意味着在HTML标记中最后声明的那些是在顶部绘制的.但是,如果我们希望在特定容器中的任意子项中反转该顺序呢？

例如,假设float div父母中有无限数量的重叠s div:

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

我们希望看起来像这样:

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

的jsfiddle

单靠css还没有办法实现这个目标吗？如果没有,使用javascript为任意子元素实现此功能的最有效和最安全的方法是什么？

先前已经询问过类似功能的问题,但不是专门用于具有任意数量的子元素的一般意义上的问题.看到这里和这里.

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>

Answer 2

你可以试试新的弹性盒。显示：内联柔性；弯曲方向：列反向；