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

Question

当我设置父级的 z 索引属性时，重叠不起作用。这是 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 link. When i remove z-index from black_gradient, it works as expected. I read a few topic about overlapping and z index such as from mozilla dev page。但是我无法弄清楚为什么当我设置 z-index 时它不起作用。

Answer 1

这是现在的样子JS Fiddle

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

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

T 问题是由堆叠概念 z-index 引起的，其中 child 元素具有独立于其 parent 的不同堆叠上下文，来自 MDN - The stacking context 页面：

Each stacking context is completely independent from its siblings: only descendant elements are considered when stacking is processed.

此外，来自注释部分：

根目录
- DIV #2 - z-index 是 2
- DIV #3 - z-index 是 4
  - DIV #5 - z-index 是 1，堆叠在带有 [=88 的元素下=] 的 4，这导致渲染顺序为 4.1
  - DIV #6 - z-index 是 3，堆叠在带有 [=88 的元素下=] 的 4，这导致渲染顺序为 4.3
  - DIV#4 - z-index是6，堆叠在一个z-index为4的元素下，这导致渲染4.6
- DIV #1 - z-index 是 5

所以之前的问题是因为 children 的 parents 总是有更高的 z-index 值，因为它被认为是另一个堆叠上下文，就像 DIV#5 和 DIV#6 到上面例子中的 parent DIV#3。

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

Overlapping does not work when i set parent's z-index

html

css

z-index

overlapping