在相对定位的父 div 下，在绝对定位的子 div 上面临 z-indexing 问题答案

【问题标题】：Facing z-indexing issues on absolutely positioned child div under a relatively positioned parent div在相对定位的父 div 下，在绝对定位的子 div 上面临 z-indexing 问题
【发布时间】：2013-05-22 06:19:11
【问题描述】：

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

【问题讨论】：

标签： css position z-index css-position

【解决方案1】：

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

将其放在另一行上方

【讨论】：

【解决方案2】：

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

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

其实，如果你能给第二个.div1它的自己的规则，是有可能的：

首先.div1z-index:0
.div1z-index:1
第二个.div1z-index:-1

但这仅适用于负的z-index，因为它们被渲染/堆叠在正的之下。

因此，在我上面的快速示例中，它不适用于：

首先.div1z-index:1
.div1z-index:2
第二个.div1z-index:0

查看documentation中的编号列表，了解不同图层的绘制顺序。

【讨论】：

我从 .div1 中删除了 z-index - 我不需要它并且测试它错误。非常感谢它的工作。

【解决方案3】：

把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>

【讨论】：

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

【解决方案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; }

:)

【讨论】：

在第二个 div1 中可能会出现 div2，这就是为什么这个解决方案不起作用
是的，它不会。为此，您需要为顶部 div 指定适当的 z-index，否则没有办法:)

【解决方案5】：

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

div1 每次出现一次。

这对吗？

【讨论】：

【解决方案6】：

无法做到（仅使用 CSS）。

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

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

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

【讨论】：