gpt4 book ai didi

css - 在相对定位的父 div 下面对绝对定位的子 div 的 z-indexing 问题

转载 作者:行者123 更新时间:2023-11-28 09:38:10 25 4
gpt4 key购买 nike

<!DOCTYPE html>
<html lang="pl">
<head>
<title>Test z-index</title>
<style>
.div1 {position:relative; z-index:1; margin:10px; background:#eee; }
.div2 {position:absolute; top:14px; z-index:999; background:blue; }
</style>
</head>
<body>
<div class="div1" >Lorem ipsum ... <div class="div2">This element I want to be on top!</div> Phasellus fermentum in, dolor.</div>
<div class="div1" >Suspendisse a pellentesque dui, non felis.</div>
</body>
</html>

http://jsfiddle.net/yMcf6/

我有两个相对定位的元素 div1

在第一个元素中,我放置了一个绝对元素div2。我想将 div2 元素放在 div1 元素(网站上的所有元素)之上。

问题是 div2 在第一个 div1 元素之上,但不在第二个 div1 元素之上。

我该如何解决?如何编辑我的 CSS 代码?

最佳答案

.div1 中删除 z-index 将允许 .div2 绝对定位在 .div1 之上> 元素。

您遇到的问题是每个定位并具有 z-index:1.div1 都会创建它自己的 new 堆栈上下文,它们不会(正如您发现的那样)相互影响。

实际上,如果您可以给第二个 .div1 它是自己的 规则,则可能有:

  • 第一个 .div1 z-index:0
  • .div1 z-index:1
  • 第二个.div1 z-index:-1

但这仅适用于负 z-index,因为它们在正值下呈现/堆叠。

因此,在我上面的快速示例中,它不能用于:

  • 第一个 .div1 z-index:1
  • .div1 z-index:2
  • 第二个.div1 z-index:0

请参阅 documentation 中的编号列表用于描述不同层的绘制顺序。

关于css - 在相对定位的父 div 下面对绝对定位的子 div 的 z-indexing 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16772381/

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