为什么 z-index 较高的 div 不可见（覆盖）？

Question

在this example 中，内部绿色 div 被中间蓝色 div 覆盖，至少在 Chrome 中，尽管它具有更高的 z-index。为什么会这样以及如何使它在蓝色 div 上可见？绿色 div 必须在外部黄色 div 内。从上到下：

1. #inner
2. #middle
3. #outer

Answer 1

您可以做到这一点，但您需要将 #middle div 移动到 #outer 内，以便 z-index 工作

div {
  position: absolute;
}
#outer {
  width: 300px;
  height: 100px;
  top: 20px;
  background: yellow;
}
#inner {
  width: 240px;
  height: 80px;
  top: 10px;
  left: 30px;
  background: green;
  z-index: 2;
}
#middle {
  width: 280px;
  height: 140px;
  left: 10px;
  z-index: 1;
  background: blue;
  top: -16px;
}

<div id="outer">
  <div id="inner"></div>
  <div id="middle"></div>
</div>