当我设置父级的z-index时，重叠不起作用

Question

当我设置父＆＃s; s索引属性时，重叠不起作用。这是html和css：

.black_gradient{
  width:100%;
  height:100%;
  background: linear-gradient(0deg,rgb(75, 75, 75) 20%, rgba(75,75,75,0.8) 70%, rgba(75,75,75,0.3));
  position:relative;
  display:block;
  z-index:3;
}
.img_container{
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: relative;
  z-index:-2;
  display:inline-block; 
}
<div class="black_gradient">
   <div class="img_container">
      <img src="http://i48.tinypic.com/wrltuc.jpg" />
   </div>
</div>

和JSFiddler链接。当我从black_gradient中删除z-index时，它按预期工作。我读了一些关于重叠和z索引的话题，比如来自mozilla dev page。但是当我设置z-index时，我无法弄清楚为什么它不起作用。

Answer 1

以下是它现在的样子JS Fiddle

＆＃13;

＆＃13;

html, body{
  margin:0;
  padding:0;
  height:100%;
}
.img_container {
  width: 100%;
  height: 500px;
  margin: 0 auto;
  position: relative;
  display: inline-block;
}
.to_top.black_gradient {
  width: 100%;
  height: 100%;
  display:inline-block;
  background: linear-gradient(0deg, rgb(75, 75, 75) 20%, rgba(75, 75, 75, 0.8) 70%, rgba(75, 75, 75, 0.3));
  position: absolute;
  top:0;
  left:0;
}

＆＃13;

<div class="img_container">
  <img style="" class="tall" src="http://i48.tinypic.com/wrltuc.jpg" />
  <div class="to_top black_gradient">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

问题是由堆叠z-index的概念引起的，其中子元素具有与父母不同的堆叠上下文，来自MDN - The stacking context页面：

  

每个堆叠上下文完全独立于其兄弟：在处理堆叠时只考虑后代元素。

另外，从备注部分：

• 的根
  • DIV＃2 - z-index 2
  • DIV＃3 - z-index 4
    • DIV＃5 - z-index 1 ，堆叠在z-index为4的元素下，导致渲染顺序 4.1
    • DIV＃6 - z-index 3 ，堆叠在z-index为4的元素下，导致渲染顺序 4.3
    • DIV＃4 - z-index为6，堆叠在z-index为4的元素下，导致渲染顺序 4.6
  • DIV＃1 - z-index 5

所以之前的问题是因为孩子的父母总是有更高的z-index值，因为它被视为另一个堆叠上下文，就像DIV#5和DIV#6他们的父亲DIV#3一样1}}在上面的例子中。