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元素（网站上的所有元素）之上。

The problem is that div2 is on top of first div1 element, but it's not on top of the second div1 element.

How can I fix it? How can I edit my css code?

4

6 回答 6

3

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

您遇到的问题是，每个.div1已定位并z-index:1创建了自己的新堆叠上下文，它们不会（如您发现的那样）相互交互。

实际上，如果您可以给第二个.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

有关不同图层的绘制顺序的说明，请参阅文档中的编号列表。

于 2013-05-27T11:43:30.850 回答
1

放在div2两个div1s 之外，你就不需要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>
于 2013-05-27T11:44:47.407 回答
0

看到这个小提琴 - 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; }

:)

于 2013-05-27T11:51:10.113 回答
0

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

将其放在另一行之上

于 2013-05-27T11:42:50.057 回答
0

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

每次出现 div1 一次。

这个对吗？

于 2013-05-27T11:52:43.703 回答
0

它无法完成（仅使用 CSS）。

通过给出div1一个位置和一个 z-index，您可以创建一个新的堆叠上下文。所以div2在你的div1. 每个z-indexinside ofdiv1在堆叠上下文中只有一个含义。第二个div1和第一个div2在不同的堆叠上下文中，所以没有机会。

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

  • 将div2dom 层次结构中的 移动到与div1
  • 定位它以匹配先前的位置
  • 给它适当的 z-index
于 2013-05-27T12:05:52.863 回答