子div绝对定位，父div相对定位，存在z-index层级问题。

Question

子div绝对定位，父div相对定位，存在z-index层级问题。

3

<!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代码？

- Cichy

6个回答

1

将 div2 放在两个 div1 的外面，就不需要使用 z-index 了。

像这样：

http://jsfiddle.net/yMcf6/7/

我在fiddle中给div2添加了一些内边距，以使它清晰地位于其他两个div上方。

你的HTML应该像这样：

<div class="div1" >Lorem ipsum ...  Phasellus fermentum in, dolor.</div>
<div class="div1" >Suspendisse a pellentesque dui, non felis.</div>
<div class="div2">This element I want to be on top!</div>

- soundswaste

在这种情况下，我将无法将div2相对于div1定位。（整个网站将有许多div1和div2元素） - Cichy

0

看看这个代码片段 - http://jsfiddle.net/yMcf6/10/

问题是 .div1 包含相同的 z-index。.div1 的内部元素 .div2 的 z-index 不会影响到 .div1。在这种情况下，你需要为 .div1 再额外添加一个类，因为它包含其他元素。

像这样 -

<div class="div1 has_div2">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>

和 CSS：

.div1 {position:relative; z-index:1; margin:10px; background:#eee; }
.div1.has_div2 { z-index:5 }
.div2 {position:absolute; top:14px; z-index:999; background:blue; }

:)

- HADI

这种情况可能会发生，即在第二个div1中可能会出现div2，因此这种解决方案行不通。 - Cichy

是的，它不会。为此，您需要为顶部div指定适当的z-index，否则没有其他方法 :) - HADI

0

将 top:14px; 改为 top:0px;

这样会把它放在另一行的上方

- Ryan de Vries

0

你的意思是希望div2出现两次吗？

每个div1的出现都要有一次。

这样正确吗？

- Baz

0

这不能仅使用 CSS 完成。

通过给 div1 设置位置和 z-index，您创建了一个新的堆叠上下文。因此，div2 在您的 div1 内部。在 div1 中的每个 z-index 仅在堆叠上下文中具有意义。第二个 div1 和 div2 处于不同的堆叠上下文中，因此没有机会。

您必须以这种方式使用 JavaScript。

将 div2 在 dom 层次结构中移动到与 div1 相同的堆叠上下文中
将其定位以匹配先前的位置
给它适当的 z-index

- yunzen

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- andyb · Accepted Answer

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

你遇到的问题是每个使用 z-index:1 定位的 .div1 都会创建自己的新堆叠上下文，它们不会（如你所发现的）相互影响。

实际上，如果你可以为第二个 .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 请参见文档中的编号列表，了解不同图层的绘制顺序的说明。