固定位置元素前面的 Z-index

Question

我找不到解决问题的方法，所以我求助于您:)。

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

* {
  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/

绿色区域是模态框。我的objective是让元素在固定位置的元素上方变绿

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

提前谢谢你，亲切地

Answer 1

这样就可以了

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

Answer 2

element3 将永远超过 element1 及其所有 children 即使 element1 的 child 具有更高的 z-index 因为它最终与其 parent element1 有关，后者的 z-index 低于 element3

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

将element2和element3作为children for 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>

固定位置元素前面的 Z-index

Z-index in front of an element in a fixed position

css

fixed

z-index

absolute