Z索引和嵌套定位元素

Question

我试图弄清楚为什么z-index属性不起作用。 根据mdn docs，只要它们是具有z-index的定位元素，它就应该起作用。 我有3个div，每个div相互嵌套。 我只是想使z-index工作，所以我给.outer-div一个z-index: 3而给.inner-div一个z-index: 1 。 根据文档，z索引越大，它离观察者越近。 这不是意味着.outer-div的紫色应该覆盖.outer-div的红色.inner-div吗？

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

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

Answer 1

如果要实现此功能，则应进行一些更改。 默认情况下，HTML行为仅将last（child）元素填充在顶部。 如果您喜欢以下方法，它将可以正常工作：

<!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索引和嵌套定位元素

问题描述

1 个解决方案

解决方案1
0 2018-02-23 11:19:06

Z索引和嵌套定位元素

问题描述

1 个解决方案

解决方案1 0 2018-02-23 11:19:06

解决方案1
0 2018-02-23 11:19:06