在固定位置的元素前面的Z索引
问题描述:
我没有找到解决方案,所以我转向你:)。在固定位置的元素前面的Z索引
这里是上下文:我有两个兄弟元素,一个是绝对位置,另一个是固定位置。固定元素基本始终位于顶部。考虑下面的代码:
* {
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;
} \t
#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必须保持绝对位置才能解锁自己?
谢谢你, 亲切。
答
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;
} \t
#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>
答
这将做
* {
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>
+0
这也是一个解决方案,但在固定的我不能改变元件2的位置。感谢您的帮助。 –
我会在元素二中发送元素三,这对我的问题更合适,非常感谢您的帮助。 –