Question

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

Answer 1

从z-index移除.div1，.div2可以完全定位在.div1元素上。

您遇到的问题是，定位并.div1的每个z-index:1都会创建自己的新堆叠上下文，而这些上下文没有（如您所见）与每个上下文进行交互其他

实际上，如果您可以提供第二个.div1 拥有的规则，则可以：

首先.div1 z-index:0
.div1 z-index:1
second .div1 z-index:-1

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

因此，在我上面的快速示例中，不能使用：

首先.div1 z-index:1
.div1 z-index:2
second .div1 z-index:0

请参阅documentation中的编号列表，了解不同图层的绘制顺序。

Answer 2

将div2放在两个div1之外，您将不需要z-index。

像这样：

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

我在小提琴中添加了一些填充div2，以明确其在其他2个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>

Answer 3

给div2而不是top:14px; to top:0px;

将它放在另一条线上方

Answer 4

看到这个小提琴 - http://jsfiddle.net/yMcf6/10/

问题是.div1包含相同的z-index。 .div2的z-index是.div1的内部元素，不会对.div2产生影响。在这种情况下，您需要为.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; }

：）

Answer 5

所以你的意思是你想让div2出现两次？

每次出现div1。

这是对的吗？

Answer 6

无法完成（仅使用CSS）。

通过为div1提供职位和z-index，您可以创建新的stacking context。因此div2位于div1内。 z-index内的每个div1在堆叠上下文中只有一个含义。第二个div1和div2处于不同的堆叠环境中，所以没有机会。

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

将dom层次结构中的div2移至与div1
将其定位为与之前的位置匹配
给它正确的z-index

面对相对定位的父div下绝对定位的子div的z索引问题

6 个答案: