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

发布时间：2020-12-14 23:28:06 所属栏目：资源来源：网络整理

导读：我只是注意到将z-index：-1设置为非静态定位元素会删除它们的悬停功能.令人惊讶的是,绝对和固定定位元件的悬浮能力随条件而变化, Absolutely/Fixed positioned elements loose the hovering capability partially only if there is some text written after

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

Absolutely/Fixed positioned elements loose the hovering capability partially only if there is some text written after them. Hovering over near the top border doesn’t work. If there is nothing after them then hovering works properly.

Relatively positioned elements loose the hovering capability completely even if there is no text after them.

相对定位：

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

绝对定位后的文字：

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

固定后用文字定位：

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

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

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

Why does the whole viewport get the color of the body? The border shows that body is not all over the view port but if we give the body some color then the whole view port gets that color.

If we hover over the inner child box,having z-index:-1,then the parent container(i.e. body) is automatically hovered. Why?

解决方法

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

>使用正z-index时,元素将移动到上层.
>使用负z-index时,元素将移动到下层.

现在,让我们看看下面的图片：

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

在前面的图片中,元素的z-index设置为-1,这意味着元素层是向下到包装元素的1层.覆盖包装元素位于元素上方,我们不能将其悬停在该元素上.

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

在前面的图片中,这意味着元素层是向下到包装元素的1层.并且覆盖包装元件位于元件上方,但是元件没有被包装物覆盖,因为其高度没有增加到层,这就是为什么我们仍然可以将鼠标悬停在固定或绝对定位的元件上.

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!