gpt4 book ai didi

CSS z-index 被页面上的元素顺序覆盖了吗?

转载 作者:太空宇宙 更新时间:2023-11-03 19:24:00 25 4
gpt4 key购买 nike

几个小时以来,我一直在与 IE7 中的 CSS z-index 作斗争,也许你能帮上忙!

我有一个绝对定位的 div,出现在它的父 div 之上,这很棒。但是 - 它出现在后面的 div 下,这些 div 是其父级的 sibling 。

这看起来很奇怪,就像 z-index 只适用于每个 div 或其他东西的本地范围。

我该如何设置,以便当我将一个元素设置为具有比页面上任何其他元素都大的 z-index 时,无论如何它都会显示在顶部?

这是我的测试页面:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>test</title>
</head>
<body>
<div style="position: relative; z-index: 0">
div1
<div style="position: relative; z-index: 0">
div2
</div>
<div style="color: red; background-color: #ffffff; position: absolute; z-index: 2">
div3
</div>
</div>
<div style="position: relative; z-index: 0">
div1
<div style="position: relative; z-index: 0">
div2
</div>
<div style="color: red; background-color: #ffffff; position: absolute; z-index: 2">
div3
</div>
</div>
<div style="position: relative; z-index: 0">
div1
<div style="position: relative; z-index: 0">
div2
</div>
<div style="color: red; background-color: #ffffff; position: absolute; z-index: 2">
div3
</div>
</div>
</body>
</html>

最佳答案

IE 有一个 major z-index bug :

In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn't work correctly.

您可以尝试更改 z-index,但如果您希望这两个元素都出现,您可能必须将它们从其祖先结构中拉出并使它们成为顶级 DOM 元素。

关于CSS z-index 被页面上的元素顺序覆盖了吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1667154/

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