在固定位置的元素前面的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必须保持绝对位置才能解锁自己？

谢谢你，亲切。

来源

2017-07-28 Jimmy.D

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>

来源

2017-07-28 08:54:40

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

这将做

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

来源

2017-07-28 08:52:02 Owais

这也是一个解决方案，但在固定的我不能改变元件2的位置。感谢您的帮助。 –

在固定位置的元素前面的Z索引

回答

相关问题