为什么负z-index会消除非静态定位元素的悬停功能？
use*_*782 6 html css position hover
我只是注意到设置 z-index:-1为非静态定位元素会消除其悬停功能.令人惊讶的是,绝对和固定定位元件的悬浮能力随条件而变化,
绝对/固定定位元素仅在其后面写入一些文本时才会部分地松散悬停功能.将鼠标悬停在顶部边框附近不起作用.如果他们之后什么也没有,那么悬停工作正常.
即使在它们之后没有文本,相对定位的元素也完全松散了悬停能力.
相对定位:
<!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会删除绝对/固定定位元素的悬停功能,部分是否在它们之后有文本,以及完全相对定位的元素？
附录:在其他用户的帮助下,我理解了这个概念.但仍然存在一些疑虑:
为什么整个视口都能获得身体的颜色？边框显示身体不是遍布视口,但如果我们给身体一些颜色,那么整个视口就会得到那种颜色.
如果我们将鼠标悬停在内部子框上
z-index:-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 层。覆盖的包装元素位于该元素之上，但该元素仍然没有被包装覆盖，因为它的高度没有增加到该层，这就是为什么我们仍然可以将鼠标悬停在固定或绝对定位的元素上。
希望！这让您清楚了有关 z-index 的事情。
如果一个元素是透明的并且元素z-index:-1;在它的“下面”。这会停止悬停效果。
Z-index 可以让您看到建筑物的立面，并且您可以从鸟瞰角度观看它。如果地下室上面有地板，即使它是用玻璃建造的，你也无法到达地下室。
如果其上方没有任何元素，则可以将其悬停并且您可以“到达地下室”。
| 归档时间： |
|
| 查看次数： |
1634 次 |
| 最近记录： |