Question

我试图找出为什么z-index属性不会起作用。根据mdn文档，只要它们是定位元素，具有z-index，它就应该有效。我有3个div，每个div互相嵌套。我只是想让z-index工作，所以我给.outer-div一个z-index: 3，同时给.inner-div一个z-index: 1。根据文档，z-index越大，它越接近观察者。是不是意味着.outer-div中的紫色应该覆盖.inner-div中的红色div？

＆＃13;

.outer-div {
  height: 200px;
  width: 200px;
  background: purple;
  position: relative;
  z-index: 3;
  border: 1px purple dotted;
}

.middle-div {
  height: 150px;
  width: 150px;
  background: blue;
  position: relative;
  z-index: 2;
  border: 1px 
}

.inner-div {
  height: 100px;
  width: 100px;
  background: red;
  position: relative;
  z-index: 1;
  border: 1px 
}

＆＃13;

<div class="outer-div">
  
  <div class="middle-div">
    
    <div class="inner-div"> </div>
    </div>
</div>

＆＃13;

Answer 1

如果要实现此功能，则应进行一些更改。默认情况下，HTML行为只是最后（子）元素将填充在顶部。如果您喜欢以下内容，它将起作用：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>demo!</title>
    <style>
    .outer-div {
  height: 200px;
  width: 200px;
  background: purple;
  position: relative;
  z-index: 3;
  border: 1px purple dotted;
}

.middle-div {
  height: 150px;
  width: 150px;
  background: blue;
  position: relative;
  z-index: 2;
  border: 1px 
}

.inner-div {
  height: 100px;
  width: 100px;
  background: red;
  position: relative;
  z-index: 1;
  border: 1px 
}
.visual{
    opacity: 0.7;

}
</style>
</head>
<body>
<!-- <div id="example"></div> -->
<div class="outer-div">

        <div class="middle-div">

          <div class="inner-div"> </div>
          </div>
      </div>
      <div class="outer-div visual"></div>
      <div class="middle-div visual" style="top:-150px; z-index: 2;"></div>
      <div class="inner-div visual" style="top:-250px; z-index: 1;"></div>
</body>
</html>

希望，我理解了这个问题并希望这会有所帮助

Z-index和嵌套定位元素

1 个答案: