javascript - 在公共(public)背景前显示元素

Question

我们想找到一种解决方案，只显示背景前的绿色框 (#back)。而且无需修改 html。

HTML:

<div id="body" style="z-index:1;position:relative;">

  <div id="div1" style="z-index:4;position:relative;">
  </div>

  <div style="z-index:4;background-color: red;  width: 70px;position:relative;height: 70px;">
    <div id="div2" style="z-index:7;background-color:green;position:relative;">
    </div>
  </div>

  <div id="back" style="z-index:5;">
  </div>

</div>

CSS:

#body {
  background-color: blue;
  width: 500px;
  height: 500px;
  position: relative;
}

#div1 {
  position:relative;
  background-color: white;
  width: 100px;
  height: 100px;
}

#back {
  position: absolute;
  top:0;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  background-color: black;
}

div {
  width: 50px;
  height: 50px;
}

我们的问题有一个 fiddle :

https://jsfiddle.net/ruj23c60/3/

Answer 1

  <div style="z-index:4;background-color: red;  width: 70px;height: 70px;">
    <div id="div2" style="z-index:7;background-color:green;position:relative;">
    </div>
  </div>

从 #div2 的父元素中删除样式 position: relative 就足够了