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

我们的问题有一个小问题：

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

Answer 1

我知道有两种方式。

<强>首先

您需要将z-index:3提交给#back。（小于#div2父div）然后你可以把它放在#back

的前面

但是这样整个div都来自黑色（#back）div。 Fiddle

<强>第二

将position:adsolute;设为#div2并从其父级中删除position:relative;。 Fiddle

注意：我从opacity: 0.7;发表了评论#back，以便正确理解。

Answer 2

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

从position: relative的父级删除样式#div2已足够

在共同背景前显示元素

2 个答案: