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/

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

如果知道元素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及其所有孩子，即使element1的孩子的z-index更高，因为它最终与其父element1相关其z-index低于element3

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

将element2和element3作为element1

＆＃13;

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

＆＃13;

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

＆＃13;

在element2之外的element1与element3

＆＃13;

* {
  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%;
}

＆＃13;

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

＆＃13;

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

2 个答案: