20

示例标记：

<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。我所追求的可行吗？

4

4 回答 4

15

So still no answer here, i just did something similar, even though my workaround is 100% hack, if anyone else comes to this page, it did work!

#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;  
    }

I just had that and as long as i didn't get over 10 elements it seems to work...

于 2011-08-11T22:20:06.173 回答
14

这是最佳答案的 SASS 函数：

@for $i from 1 through 10 {
   &:nth-child(#{$i}) {
     z-index: #{10 - $i};
   }
}
于 2016-04-13T21:14:20.953 回答
9

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

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

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

请参阅 fiddles 以获取工作示例（将鼠标悬停在wrapper元素上以查看操作）。

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

这是您当前的设置：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;
于 2013-01-15T21:38:36.843 回答
1

我确实遇到了这个问题，但是元素数量不确定，而且可能太多，无法使 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 个项目我没有注意到任何延迟。

于 2018-01-10T21:30:55.687 回答