gpt4 book ai didi

html - 相对 div 覆盖具有更高 z-index 的固定 div

转载 作者:太空宇宙 更新时间:2023-11-04 04:09:49 25 4
gpt4 key购买 nike

您好,我有以下 HTML 代码

<body>
<div class="relative1">
<div class="fixed1"> </div>
</div>
<div class="relative2"> </div>
</body>

和CSS

.relative1 {
left: 0px;
top: 0px;
width: 100px;
height: 100px;
background-color: red;
position: relative;
z-index: 1;
}

.fixed1 {
width: 100px;
height: 100px;
left: 20px;
top: 20px;
background-color: green;
position: fixed;
z-index: 2;
}

.relative2 {
width: 100px;
height: 100px;
left: 30px;
top: -80px;
background-color: blue;
position: relative;
z-index: 1;
}

示例:FIDDLE

你可以看到 div.relative2 覆盖了我的 div.fixed1 不是我想要的。我需要用我的 div.fixed1 覆盖所有内容。有没有办法在不更改 .relative1.relative2 css 的情况下做到这一点?

最佳答案

不要将固定的 div 嵌套在相对的 div 中:

http://jsfiddle.net/WGcRe/1/

<body>
<div class="relative1">
</div>
<div class="fixed1"> </div>
<div class="relative2"> </div>
</body>

固定元素与相对定位元素无关;它们会粘在屏幕上。
因此,我看不到嵌套它们的理由。

关于html - 相对 div 覆盖具有更高 z-index 的固定 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20839460/

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