Question

我刚刚注意到将z-index:-1设置为非静态定位元素会删除其悬停功能。令人惊讶的是，绝对和固定定位元素的悬浮能力随条件而变化，

绝对/固定定位元素只有在它们之后写入一些文本时才会部分地松散悬停功能。悬停在顶部边界附近并不起作用。如果他们之后什么也没有，那么悬停就能正常工作。



相对定位的元素即使在它们之后没有文字也完全失去了悬停能力。

相对定位：

＆＃13;

<!DOCTYPE html>
<html>
<style>
.tooltip {
    position: relative;
    display: block; 
    border: 5px solid black;
    padding: 5px;
    z-index: -1;
}

.tooltip:hover {
    color:red; background-color: yellow;
}
</style>
<body style="text-align:center;">

<p>Move the mouse over the text below:</p>

<div class="tooltip">
Hover over me
</div>



</body>
</html>

＆＃13;

完全定位后面的文字：

＆＃13;

<!DOCTYPE html>
<html>
<style>
.tooltip {
    position: absolute;
    display: block; 
    border: 5px solid black;
    padding: 5px;
    z-index: -1;
}

.tooltip:hover {
    color:red; background-color: yellow;
}
</style>
<body style="text-align:center;">

<p>Move the mouse over the text below:</p>

<div class="tooltip">
Hover over me
</div>

RAndom text

</body>
</html>

＆＃13;

修正了文字后面的文字：

＆＃13;

<!DOCTYPE html>
<html>
<style>
.tooltip {
    position: fixed;
    display: block; 
    border: 5px solid black;
    padding: 5px;
    z-index: -1;
}

.tooltip:hover {
    color:red; background-color: yellow;
}
</style>
<body style="text-align:center;">

<p>Move the mouse over the text below:</p>

<div class="tooltip">
Hover over me
</div>

RAndom text

</body>
</html>

＆＃13;

问题：为什么设置z-index：-1会删除绝对/固定定位元素的悬停功能，部分是否在它们之后有文本，以及完全相对定位的元素？

附录：在其他用户的帮助下，我已经理解了这个概念。但仍然存在一些疑虑：

为什么整个视口都会获得身体的颜色？边框显示身体不是遍布视口，但如果我们给身体一些颜色，那么整个视口就会得到那种颜色。



如果我们将鼠标悬停在具有z-index:-1的内部子框上，则父容器（即正文）会自动悬停。为什么呢？

Answer 1

你可能知道z-index是如何工作的？

当您使用正z-index时，该元素将移至上一层。
使用负z-index时，元素将移至下层。

现在，让我们看一下以下图片：

在上图中，文档流程正常。当元件div相对定位时，包装元件的高度自动增加。并且z-index被设置为1层直到包装元素。我们可以将鼠标悬停在元素上，因为它位于包装器上方。

在上图中，元素的z-index设置为-1，这意味着元素层是包装元素的1层。并且覆盖包装元素位于元素上方，我们不能将其悬停在该元素上。

在上图中，文档的流程不正常，因此称为out of flow。由于div元件固定或绝对定位，因此包装元件的高度不会增加。并且z-index设置为1层，直到包装元素，我们可以将鼠标悬停在元素上。

在上图中，元素的z-index设置为-1，这意味着元素层是包装元素的1层。并且覆盖包装元件位于元件上方，但是元件没有被包装材料覆盖，因为其高度没有增加到层，这就是为什么我们仍然可以将鼠标悬停在固定或绝对定位的元件上。 / p>

希望！这样可以清楚地了解z-index。

Answer 2

如果元素是透明的，并且z-index:-1;的元素在＆＃39;下面。它。这会停止悬停效果。

Z-index可以看作建筑物中的高程，也可以从鸟眼看到它。如果地板上方有地板，即使它是用玻璃建造的，也无法到达地下室。

如果上面没有任何元素，它可以悬停，你可以到达地下室。

Answer 3

我自己找到了答案。感谢用户BoltClock和Bhojendra。我不知道为什么BoltClock删除了他们的答案。它们是正确的，因为父容器根据父容器中的文本量隐藏子框。要想象它，我所要做的就是为body添加边框。我在以下代码中给出了红色虚线边框：

相对定位：

＆＃13;

<!DOCTYPE html>
<html>
<style>
.tooltip {
    position: relative;
    display: block; 
    border: 5px solid black;
    padding: 5px;
    z-index: -1;
}

.tooltip:hover {
    color:red; background-color: yellow;
}

body {
        border: 2px dotted red; 
}
</style>
<body style="text-align:center;">

<p>Move the mouse over the text below:</p>

<div class="tooltip">
Hover over me; I'm underneath the body.
</div>



</body>
</html>

＆＃13;

完全定位后面的文字：

＆＃13;

<!DOCTYPE html>
<html>
<style>
.tooltip {
    position: absolute;
    display: block; 
    border: 5px solid black;
    padding: 5px;
    z-index: -1;
}

.tooltip:hover {
    color:red; background-color: yellow;
}

body { 
       border: 2px dotted red;
}
</style>
<body style="text-align:center;">

<p>Move the mouse over the text below:</p>

<div class="tooltip">
Hover over me
</div>

RAndom text

</body>
</html>

＆＃13;

修正了文字后面的文字：

＆＃13;

<!DOCTYPE html>
<html>
<style>
.tooltip {
    position: fixed;
    display: block; 
    border: 5px solid black;
    padding: 5px;
    z-index: -1;
}

.tooltip:hover {
    color:red; background-color: yellow;
}

body { 
       border: 2px dotted red;
}
</style>
<body style="text-align:center;">

<p>Move the mouse over the text below:</p>

<div class="tooltip">
Hover over me
</div>

RAndom text

</body>
</html>

＆＃13;

可以看出，正文覆盖了悬停在我身上框。

虽然我得到了悬停的问题。原始问题仍然存在一些疑问。

为什么负z-index会删除非静态定位元素的悬停功能？

3 个答案: