gpt4 book ai didi

css - z-index 不适用于固定定位

转载 作者:数据小太阳 更新时间:2023-10-29 09:04:34 26 4
gpt4 key购买 nike

我有一个带有默认定位(即 position:static)的 div 和一个带有 fixeddiv位置。

如果我设置元素的z-indexes,似乎不可能让固定元素位于静态元素后面。

    #over {
width: 600px;
z-index: 10;
}

#under {
position: fixed;
top: 5px;
width: 420px;
left: 20px;
border: 1px solid;
height: 10%;
background: #fff;
z-index: 1;
}
    <!DOCTYPE html>
<html>
<body>
<div id="over">
Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
</div>
<div id="under">
</div>
</body>
</html>

或者在 jsfiddle 上:http://jsfiddle.net/mhFxf/

我可以通过使用来解决这个问题position:absolute在静态元素上,但谁能告诉我为什么会发生这种情况?

(似乎有一个与此类似的问题,(Fixed Positioning breaking z-index)但它没有令人满意的答案,因此我在这里用我的示例代码问这个问题)

最佳答案

position: relative 添加到 #over 中,如以下代码片段所示:

    #over {
width: 600px;
z-index: 10;
position: relative;
}

#under {
position: fixed;
top: 14px;
width: 415px;
left: 53px;
border: 1px solid;
height: 10%;
background: #f0f;
z-index: 1;
}
    <!DOCTYPE html>
<html>
<body>
<div id="over"><P>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</>
</div>

<div id="under"></div>
</body>
</html>

Fiddle

关于css - z-index 不适用于固定定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5218927/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com