管理您的代码中的Z-index - 傻瓜

当您使用绝对定位时，您可以精确确定事物的放置位置，因此它们可能重叠。默认情况下，稍后在HTML中描述的元素位于前面描述的元素之上。

在CSS中处理深度

您可以使用名为 z-index 的特殊CSS属性来更改此默认行为。 z 轴指的是元素看起来对观察者有多接近。这张图片演示了这是如何工作的

<！ --1 - >

z-index 可以让你改变哪些元素更靠近用户。

z-index 属性需要一个数字值。数字越高意味着元素距离用户越近（ top ）。任何 z-index 的值都会使元素高于默认的 z-index 的元素。当你想要显示在其他元素之上的元素（例如，临时出现在其他文本之上的菜单）时，这可能非常有用。

以下是说明 z-index 效果的代码：

zindex。 html

#blueBox {

background-color：blue;

width：100px;

height：100px;

位置：绝对;

left：0px;

top：0px;

margin：0px; z-index：1;

}

#blackBox {

background-color：black;

width：100px;

height：100px;

位置：绝对;

left：50px;

top：50px;

margin：0px;

}

使用z-index

这段代码唯一的改变是添加

z-index 属性。 z-索引值越高，该对象似乎对用户越接近。 在使用

z-index 时，请注意以下几点： 一个元素可以完全隐藏另一个元素。

• 当你开始定位事物时，一个元素似乎消失了，因为它完全被另一个元素覆盖。 z-index 属性是检查这种情况的好方法。 负值
• z-index 可能会有问题。 z-index 的值应该是正值。尽管支持负值，但某些浏览器（尤其是旧版本的Firefox）不能很好地处理它们，并可能导致元素消失。 最好给所有值一个
• z-index 。如果您为某些元素定义了 z-索引 ，而其他人未定义 z-索引 ，则无法保证会发生什么。如果有疑问，只要将每个值赋给它自己的 z-index ，就可以确切地知道应该重叠什么。 不要给两个元素相同
• z-index 。 z-索引 的要点是清楚地定义哪个元素应该更接近。不要通过将相同的 z-index 值分配给同一页上的两个不同元素来达到这个目的。