Question

我有以下HTML＆amp; CSS，我想把前面的小黑方块取出来，即过去＆amp; amp;在叠加层上方，我应该只看到黑色方块。这个标记只是我代码的剥离版本。

右上方的黑框需要在所有图层前面，包括覆盖层。

普兰克 - http://plnkr.co/edit/FEo8AQBBrh1YMHrduZeM?p=preview

HTML：

<body>
    <div class="div1">div1
      <div class="div1-1">div1-1
        <div class="div1-1-1">
          div 1-1-1
          <div class="div1-1-1-1">
            1-1-1-1
          </div>
        </div>
      </div>
    </div>
    <div class="overlay"></div>
  </body>

CSS：

body{color:#fff;}
.overlay{position:fixed; top:0; left:0; right:0; bottom:0; background:#000;opacity:.5; z-index:1005;}
.div1{width:100%; height:600px; background:red; position:relative;}
.div1-1 {width:auto; height:600px; background:blue; position:absolute; z-index:2; left:40px;
  top:0; bottom:0; right:0;
}
.div1-1-1 {width:100%; height:40px; background:green; position:absolute; z-index:15;
  top:0;right:0; left:0;
}
.div1-1-1-1 {width:40px; height:40px; background:black; position:absolute; right:0; top:0;}

Answer 1

我已经更改了很多结构，为了完成任务，请查看Code here

CSS代码： / *样式到这里* /

body{color:#fff;}
.overlay {
    background: none repeat scroll 0 0 #000000;
    bottom: 0;
    left: 0;
    opacity: 0.5;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 20;
}
.div1{width:100%; height:600px; background:red; position:relative;}
.div1-1 {
    background: none repeat scroll 0 0 #0000FF;
    bottom: 0;
    height: 600px;
    left: 40px;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

.div1-1-1 {
    background: none repeat scroll 0 0 #008000;
    height: 40px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}
.div1-1-1-1 {
    background: none repeat scroll 0 0 #000000;
    height: 40px;
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    z-index: 999;
}

HTML代码：

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
  <div class="overlay"></div>
    <div class="div1">div1
      <div class="div1-1">div1-1
        <div class="div1-1-1">
          div 1-1-1
          <div class="div1-1-1-1">
            1-1-1-1
          </div>
        </div>
      </div>
    </div>
    <!--<div class="overlay"></div>-->
  </body>

</html>

如果您有任何其他问题，请添加评论。

问候D.

Answer 2

似乎z-index始终从父级继承，更多详细信息在此SO question。

一种方法是删除父div的z-index并仅添加到所需的div。 Plunk here

另一个是让它有一个兄弟而不是孩子。并相应地更新z-index。

Plunk

<div class="div1">div1
  <div class="div1-1">div1-1
    <div class="div1-1-1">
      div 1-1-1

    </div>
  </div>
</div>
<div class="div1-1-1-1">
        1-1-1-1
      </div>
<div class="overlay"></div>

CSS更改

.div1-1-1-1 {width:40px; height:40px; background:black; position:absolute; right:100px; top:0;z-index:1010;}

Answer 3

我正在发送另一个解决方案，它只会改变结构，并且不会删除任何元素的z索引。

JS Fiddle Code

HTML代码：

<div class="overlay"></div>
<div class="div1">div1
    <div class="div1-1">div1-1
        <div class="div1-1-1">div 1-1-1
            <!--<div class="div1-1-1-1">1-1-1-1</div>-->
        </div>
    </div>
    <div class="div1-1-1-1">1-1-1-1</div>
</div>

CSS代码：

body {
    color:#fff;
}
.overlay {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:#000;
    opacity:.5;
    z-index:1005;
}
.div1 {
    width:100%;
    height:600px;
    background:red;
    position:relative;
}
.div1-1 {
    width:auto;
    height:600px;
    background:blue;
    position:absolute;
    z-index:2;
    left:40px;
    top:0;
    bottom:0;
    right:0;
}
.div1-1-1 {
    width:100%;
    height:40px;
    background:green;
    position:absolute;
    z-index:15;
    top:0;
    right:0;
    left:0;
}
.div1-1-1-1 {
    width:40px;
    height:40px;
    background:black;
    position:absolute;
    right:0;
    top:0;
    z-index: 9999;
}

显着点：

您必须添加部门<div class="div1-1-1-1">1-1-1-1</div> 作为<div class="div1">而非<div class="div1-1-1"></div>
类.div1-1-1-1应该被赋予等于或高于.overlay类的z-index。

只需通过HTML或jQuery更改布局结构即可实现此目的。

如果您有任何其他疑问，请在下方添加评论。

问候D.

z-index - 将深层嵌套元素添加到前面

3 个答案: