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

2022-01-22 00:00:00 position hover html css

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?

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

  2. 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 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 by which we cannot hover over that element.

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.

相关文章