Question

示例标记：

<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切换为display：block。

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

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

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

有没有一种聪明的方法可以用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（红色）将位于它之前的那个（橙色）。

我无法弄清楚我需要应用哪种类型的z索引才能使FIRST彩色重叠div位于顶部。从z到索引的顶部到底部的顺序应该反映标记（顶部为黄色，底部为红色）。

这当然是违反标准的。

我愿意使用javascript来修复这个后期显示，但我仍然在努力寻找我需要通过javascript应用的确切CSS。我可以做的是什么？

Answer 1

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

#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个元素它似乎工作......

Answer 2

闪亮的新款CSS flexbox技术让这更容易一些，但缺点是实际内容将被逆转。这不一定是一个大问题，它只是在语义上很奇怪。

简而言之：将所有内容包装在具有以下样式的容器中：

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

查看工作示例的小提琴（将鼠标悬停在wrapper元素上以查看操作）。

如果您不希望每次更新内容时都依赖javascript动态检查z-index，这将非常有用。如果动态插入<div class="wrapper">元素（或任何其他原因无法提前设置特定样式）示例中的CSS规则应足以在插入{{1时'处理z索引s以相反的顺序。

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

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

修改

我发布的CSS可能尚未准备好进行复制粘贴。然而，这是：

<h2>

Answer 3

这是最常见答案的SASS功能：

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

Answer 4

我确实遇到了这个问题，但是有一些不确定的元素，并且可能太多而不能让Jamie-wilson发布的CSS hack可行。此外，由于我的页面是用PHP动态生成的，所以我不想大惊小怪地反转DOM中所有内容的顺序并使用flexbox，就像Sandy Gifford建议的那样。我发现了一个非常简单和优雅的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项我没有注意到任何延误。

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

4 个答案: