Z-index 在一个固定位置的元素前面答案

【问题标题】：Z-index in front of an element in a fixed positionZ-index 在一个固定位置的元素前面
【发布时间】：2018-01-04 05:46:38
【问题描述】：

我没有找到解决问题的方法，所以我求助于你:)。

这里是上下文：我有两个兄弟元素，一个是绝对位置，另一个是固定位置。基本固定元素总是在顶部。考虑下面的代码：

* {
  box-sizing: border-box;
}
html, body{
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
#element1 {
  background: red;
  height: 100%;
  width: 100%;
  position: absolute;
}
#element2 {
  background: green;
  margin: 0 auto;
  height: 200px;
  position: absolute;
  width: 600px;
}
#element3 {
  background: blue;
  height: 200px;
  position: fixed;
  bottom: 0;
  width: 100%;
}

#element1,
#element3 {
  z-index: 1;
}	
#element2 {
  z-index: 10;
}

<div id="element1">
  <div>
     <div id="element2"></div>
  </div>
</div>
<div id="element3">

</div>

http://jsfiddle.net/P7c9q/1162/

绿色区域是模态的。我的目标是使元素在固定位置的元素上变成绿色。

知道元素 1 和元素 2 必须保持在绝对位置，我该如何解锁自己？

提前谢谢你，诚挚的。

【问题讨论】：

标签： css z-index fixed absolute

【解决方案1】：

element3 将始终超过element1 及其所有子代，即使element1 的子代具有更高的z-index，因为它最终与其父级element1 相关，后者的z-index 低于element3

这种情况有两种解决方案：

将element2 和element3 作为element1 的子级

* {
  box-sizing: border-box;
}
html, body{
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
#element1 {
  background: red;
  height: 100%;
  width: 100%;
  position: absolute;
}
#element2 {
  background: green;
  margin: 0 auto;
  height: 200px;
  position: absolute;
  width: 600px;
}
#element3 {
  background: blue;
  height: 200px;
  position: fixed;
  bottom: 0;
  width: 100%;
}

#element1,
#element3 {
  z-index: 1;
}	
#element2 {
  z-index: 10;
}

<div id="element1">
  <div>
     <div id="element2"></div>
  </div>
  <div id="element3">

  </div>
</div>

使element2在element1之外与element3同级

* {
  box-sizing: border-box;
}
html, body{
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
#element1 {
  background: red;
  height: 100%;
  width: 100%;
  position: absolute;
}
#element2 {
  background: green;
  top:25%;
  left:15%;
  margin: 0 auto;
  height: 200px;
  position: fixed;
  width: 600px;
}
#element3 {
  background: blue;
  height: 200px;
  position: fixed;
  bottom: 0;
  width: 100%;
}

<div id="element1"></div>
<div id="element2"></div>
<div id="element3"></div>

【讨论】：

我会在元素二中发送元素三，更适合我的问题，非常感谢您的帮助。

【解决方案2】：

这样就可以了

* {
  box-sizing: border-box;
}
html, body{
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
#element1 {
  background: red;
  height: 100%;
  width: 100%;
  position: absolute;
}
#element2 {
  background: green;
  top:25%;
  left:15%;
  margin: 0 auto;
  height: 200px;
  position: fixed;
  width: 600px;
}
#element3 {
  background: blue;
  height: 200px;
  position: fixed;
  bottom: 0;
  width: 100%;
}

<div id="element1">
  <div>
     <div id="element2"></div>
  </div>
</div>
<div id="element3">

</div>

【讨论】：

这也是一个解决方案，但我无法更改元素 2 的固定位置。感谢您的帮助。