根据页面呈现顺序反转 z-index答案

【问题标题】：reversing z-index based from page render order根据页面呈现顺序反转 z-index
【发布时间】：2010-02-26 21:59:45
【问题描述】：

示例标记：

<div class="wrapper">
    <h2>Trigger</h2>
    <div>This is some content</div>
</div>
<div class="wrapper">
    <h2>Trigger</h2>
    <div>This is some content</div>
</div>
<div class="wrapper">
    <h2>Trigger</h2>
    <div>This is some content</div>
</div>

示例 CSS：

.wrapper {z-index: 1}
.wrapper div {display: none; position: absolute;}

通过 javascript (jQuery) 我将点击事件附加到每个 h2，然后将内容 div 切换为显示：块。

目的是这些是可扩展的内容块，将与页面上的任何其他内容重叠。

问题是我希望第一个与第二个重叠，如果所有这些都打开，它将与第三个重叠。

但是，由于每一个都是在前一个之后渲染的，因此实际的堆叠顺序是相反的（最后一个内容 div 创建的 end sup 覆盖了之前创建的一次）。

有没有一种巧妙的方法可以用 CSS/HTML 扭转这种行为？或者是让页面呈现，然后通过javascript，按顺序获取所有内容div并以相反顺序给它们每个z-index的解决方案？

更新：

这里有一些更具体的标记：

<div style="padding: 10px;">Hello World
    <div style="position: relative; top: -5px;">
        <div style="position: absolute; background: yellow;"><p>This</p><p>is</p><p>overlapping</p></div>
    </div>
</div>
<div style="padding: 10px;">Hello World
    <div style="position: relative; top: -5px;">
        <div style="position: absolute; background: orange;"><p>This</p><p>is</p><p>overlapping</p></div>
    </div>
</div>
<div style="padding: 10px;">Hello World
    <div style="position: relative; top: -5px;">
        <div style="position: absolute; background: red;"><p>This</p><p>is</p><p>overlapping</p></div>
    </div>
</div>

以下标记将生成 3 个 div，每个 div 都有一个重叠的彩色 div。由于渲染顺序，最后一个绝对定位的 DIV（红色）将位于它之前的 DIV（橙色）之上。

我不知道需要应用什么类型的 z-index 才能使第一个彩色重叠 div 位于顶部。就 z-index 而言，从上到下的顺序应反映标记（顶部为黄色，底部为红色）。

当然，这与标准相反。

我愿意使用 javascript 来修复此后期显示，但我仍在为需要通过 javascript 应用的确切 CSS 而苦苦挣扎。我所追求的可行吗？

【问题讨论】：

我也很想看到这个问题的答案！我有完全相同的问题，只是我不会提前知道要堆叠多少！
如果 css3 函数可以用作 z-index 的值，那就太好了。即：counter-increment: my-counter; z-index: counter(my-counter, decimal); 或 z-index: calc(xpos+1)，但我无法让它工作。

标签： z-index reverse overlap

【解决方案1】：

所以这里仍然没有答案，我只是做了类似的事情，即使我的解决方法是 100% hack，如果其他人来到这个页面，它确实有效！

#nav ul li:nth-child(1) {
        z-index:10; 
    }
    #nav ul li:nth-child(2) {   
        z-index:9;  
    }
    #nav ul li:nth-child(3) {
        z-index:8;  
    }
    #nav ul li:nth-child(4) {   
        z-index:7;  
    }
    #nav ul li:nth-child(5) {
        z-index:6;  
    }
    #nav ul li:nth-child(6) {   
        z-index:5;  
    }

我刚刚拥有它，只要我没有超过 10 个元素，它似乎就可以工作......

【讨论】：

这实际上是一个很好的解决方案，因为与 javascript 相比，它一旦加载就不需要在客户端进行计算。使它成为 0% hack 的唯一方法是使用 SASS 或 LESS 来生成这些属性，而不是对它们进行硬编码，然后将其包装在某种 mixin 中……这就是我现在要做的 :)。谢谢。
用 SASS 完成这件事 - gist.github.com/ssidelnikov/6271776。希望它对某人有用。
这仅适用于您要设置z-index 的直接子代。我认为最初的问题虽然有点不清楚，但试图影响内部（position: absolute）divs 的z-index，这对于nth-child 是不可能的。我正在寻找一种方法来设置整个页面中某些元素的z-index，这可能是不可能的。

【解决方案2】：

这是最佳答案的 SASS 函数：

@for $i from 1 through 10 {
   &:nth-child(#{$i}) {
     z-index: #{10 - $i};
   }
}

【讨论】：

【解决方案3】：

闪亮的新 CSS flexbox 技术使这更容易，但缺点是实际内容会颠倒过来。这不一定是个大问题，只是在语义上很奇怪。

简而言之：使用以下样式将所有内容包装在一个容器中：

display: flex;
flex-direction: column-reverse;

查看 fiddles 以获得一个工作示例（将鼠标悬停在 wrapper 元素上以查看操作）。

如果您不想在每次更新内容时都依赖 javascript 来动态检查 z-index，这将非常有用。如果<div class="wrapper"> 元素是即时插入的（或任何其他原因无法预先设置特定样式）示例中的CSS规则应该足以处理z-indexes 如果您在其中插入<div>s倒序。

这是您当前的设置： http://jsfiddle.net/dJc8N/2/

这是相同的 HTML，添加了 CSS（注意 <h2> 标签中的数字）： http://jsfiddle.net/Mjp7S/1/

编辑：

我发布的 CSS 可能还没有准备好复制粘贴。然而，这是：

display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-flex-direction: column-reverse;
-moz-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
-o-flex-direction: column-reverse;
flex-direction: column-reverse;

【讨论】：

这是一个很好的解决方案！它在 IE11 中不起作用，然后我注意到在为旧版浏览器支持定义显示属性时存在一些错误。这是 css-tricks 的解决方案：css-tricks.com/using-flexbox，我更新了小提琴：jsfiddle.net/Mjp7S/8，现在可以在 IE11 中使用。再次感谢。

【解决方案4】：

我确实遇到了这个问题，但元素数量不确定，而且可能太多，无法使 jamie-wilson 发布的 CSS hack 可行。此外，由于我的页面是使用 PHP 动态生成的，因此我不想大惊小怪地颠倒 DOM 中所有内容的顺序并按照 Sandy Gifford 建议的方式使用 flexbox。我找到了一个非常简单和优雅的 jQuery 解决方案来代替：

$(document).ready(function() {

  var item_count = $('your-selector').length;

  for( i = 0; i < item_count; i++ )
  {
    $('your selector').eq( i ).css( 'z-index', item_count - i );
  }

});

我无法评价它的性能如何，但有大约 35 个项目我没有发现任何延迟。

【讨论】：