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

2023-11-30前端开发问题

本文介绍了为什么负 z-index 会消除非静态定位元素的悬停功能?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！

问题描述

I just noticed that setting z-index:-1 to non-statically positioned elements removes their hovering capabilities. Surprisingly the hovering capabilities of absolutely and fixed positioned elements varie with conditions,

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.

Relatively positioned:

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

Absolutely positioned with text after it:

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

Fixed positioned with text after it:

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

Question: Why does setting z-index:-1 remove the hovering capabilities of absolutely/fixed positioned elements, partially if there is text after them, and relative positioned elements completely?

Addendum: From the help of other users I've understood the concept. But there all still some doubts left:

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?

解决方案

You may know how z-index works?

When you use positive z-index, the element is moved to the up layer.
When you use negative z-index, the element is moved to the down layer.

Now, lets look at the following pictures:

In the preceding picture, the flow of the document is normal. As the element div is positioned relatively the height of the wrapper element is increased automatically. And the z-index is set to 1 layer up to the wrapper element. We can hover over the element as it is above the wrapper.

In the preceding picture, the flow of the document is not normal, so called out of flow. As the div element is positioned fixed or absolutely the height of the wrapper element is not increased. And the z-index is set to 1 layer up to the wrapper element and we can hover over the element.

In the preceding picture, the z-index of the element is set to -1 which means the element layer is 1 layer down to the wrapper element. And the covering wrapper element is above the element but still the element is not covered by the wrapper as its height is not increased up to the layer that's why we can still hover over the element that is positioned fixed or absolutely.

Hope! This makes clear up things to you about z-index.

这篇关于为什么负 z-index 会消除非静态定位元素的悬停功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！

The End

相关推荐

layui 实现实时刷新一个外部的div

layui 单选框、复选框、下拉菜单不显示问题如何解决？

layui要如何改变时间日历布局大小？

jQuery怎么动态向页面添加代码？

“数组中的每个孩子都应该有一个唯一的 key prop"仅在第一次呈现页面时

CoffeeScript 总是以匿名函数返回

热门文章

热门精品源码

最新VIP资源