Question

因此， spec 定义了以树的顺序绘制元素＆＃34;＆＃34;对于具有类似block级别或float状态且相同z-index的流入，未定位元素。当然，这意味着在HTML标记中最后声明的那些是在顶部绘制的。但是，如果我们希望在特定容器中任意子项的顺序被反转呢？

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

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

我们希望看起来像这样：

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

jsfiddle

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

之前已经询问过类似功能的问题，但并不是专门用于具有任意数量的子元素的一般意义上的问题。请参阅 here 和 here 。

Answer 1

您可以反转文档树中元素的顺序，使它们像您想要的那样重叠。

然后使用CSS改变他们的顺序，再次将它们放在正确的位置。

这可以通过例如

来实现

Flexible boxes：

wrapper {
  display: flex;
  flex-direction: row-reverse; /* or `column-reverse` */
  justify-content: flex-end;
}

＆＃13;

ul {
  display: flex;
  list-style: none;
  padding: 0 0 0 1em;
}
ul.reversed {
  flex-direction: row-reverse;
  justify-content: flex-end;
}
li {
  border: 1px solid;
  margin-left: -1em;
  background: #fff;
}

＆＃13;

<ul>
  <li>Samantha</li>
  <li>Allison</li>
  <li>Rachael</li>
</ul>
<ul class="reversed">
  <li>Rachael</li>
  <li>Allison</li>
  <li>Samantha</li>
</ul>

＆＃13;

Floating elements：

wrapper {
  float: left;
  clear: both;
}
item {
  float: right;
}

＆＃13;

ul {
  list-style: none;
  float: left;
  clear: both;
  padding: 0 0 0 1em;
}
li {
  float: left;
  border: 1px solid;
  margin-left: -1em;
  background: #fff;
}
ul.reversed > li {
  float: right;
}

＆＃13;

<ul>
  <li>Samantha</li>
  <li>Allison</li>
  <li>Rachael</li>
</ul>
<ul class="reversed">
  <li>Rachael</li>
  <li>Allison</li>
  <li>Samantha</li>
</ul>

＆＃13;

Direction：

wrapper {
  direction: rtl;
  text-align: left;
}
item {
  direction: ltr;
}

＆＃13;

ul {
  list-style: none;
  padding: 0 0 0 1em;
  text-align: left;
}
li {
  display: inline-block;
  border: 1px solid;
  margin-left: -1em;
  background: #fff;
}
ul.reversed {
  direction: rtl;
}
ul.reversed > li {
  direction: ltr;
}

＆＃13;

<ul>
  <li>Samantha</li>
  <li>Allison</li>
  <li>Rachael</li>
</ul>
<ul class="reversed">
  <li>Rachael</li>
  <li>Allison</li>
  <li>Samantha</li>
</ul>

＆＃13;

Answer 2

一个简单的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 3

你可以尝试新的弹性盒子。 display：inline-flex; flex-direction：column-reverse;

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

3 个答案: