为什么负z指数消除了非静态定位元素的悬停能力？ [英] Why does the negative z-index removes the hovering capabilities of non-statically positioned element?
问题描述
我注意到，将 z-index：-1 设置为非静态定位元素会移除它们的悬停功能。令人惊讶的是，绝对和固定位置元素的悬停功能会随条件而变化，
绝对/元素只有在它们之后写入一些文本时才部分地松散悬停能力。悬停在顶部边框附近不起作用。
相对定位的元素完全松开悬停功能，即使后面没有文字。
相对位置：
<！DOCTYPE html>< html>< style> .tooltip {position：relative;显示：block; border：5px solid black; padding：5px z-index：-1;}。tooltip：hover {color：red; background-color：yellow;}< / style>< body style =text-align：center;>< p>将鼠标移到下面的文本：< / p& tooltip>悬停在我上面< / div>< / body>< / html>
其后的文本绝对定位：
<！DOCTYPE html& ; html>< style> .tooltip {position：absolute;显示：block; border：5px solid black; padding：5px; z-index：-1;}。tooltip：hover {color：red; background-color：yellow;}< / style>< body style =text-align：center;>< p>将鼠标移到下面的文本：< / p& tooltip>悬停在我上面< / div> RAndom文字< / body>< / html>
$ b
修正了定位后的文字：
<！DOCTYPE html& < html>< style> .tooltip {position：fixed;显示：block; border：5px solid black; padding：5px; z-index：-1;}。tooltip：hover {color：red; background-color：yellow;}< / style>< body style =text-align：center;>< p>将鼠标移到下面的文本：< / p& tooltip>悬停在我上面< / div> RAndom文字< / body>< / html>
问题：问题：为什么设置z-index：-1删除绝对/固定定位元素的悬停功能，部分是如果文本在它们之后，完全？
附录：在其他用户的帮助下，我了解了这个概念。但是仍然有一些疑问：
为什么整个视口获得身体？边界显示身体不是在视图端口，但如果我们给身体一些颜色，那么整个视图端口获得该颜色。
如果我们将鼠标悬停在内部子框上，具有
z-index：-1父容器（即主体）自动悬停。为什么？
您可能知道z-index如何工作？
在上图中，文档的流程正常。当元件div相对定位时，包装元件的高度自动增加。并且z-index设置为1层直到包装器元素。我们可以将鼠标悬停在元素上方，因为它位于包装器上方。
在前面的图片中，元素的z-index设置为-1，这意味着元素层是包装器元素的下一层。覆盖的包装元素在元素上方，我们不能将其悬停在该元素上。
在前面的图片中，文档的流程不正常，因此调用流出。由于div元件被定位为固定的或绝对地，包装元件的高度不增加。 z-index设置为1层，直到包装器元素，我们可以将鼠标悬停在元素上。
在前面的图片中，元素的z-index设置为-1，这意味着元素层是包装器元素的下一层。覆盖的包装器元素在元素之上，但是该元素仍然不被包装器覆盖，因为它的高度没有增加到该层，这是为什么我们仍然可以悬停在被定位或绝对定位的元素上。
希望！这让你对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 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.
这篇关于为什么负z指数消除了非静态定位元素的悬停能力？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
登录 关闭
