为什么具有较高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才能工作

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;