在公共背景前面显示元素

Showing element in front of common backdrop

本文关键字：显示 元素 前面 背景      更新时间：2023-09-26

我们希望找到一种解决方案，只显示背景前面的绿色框（#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/

  <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就足够了

据我所知，有两种方法。

第一：

你需要给#back z-index:3.（小于#div2父div）然后你可以把它放在前面#back

但这样整个div都出现在黑色（#back）div的前面。小提琴

第二：

position:adsolute; #div2并从其父级中删除position:relative;。小提琴

注意：我有来自#back的评论opacity: 0.7;，以正确理解。

相关文章：