Z-INDEX: 999什么意思

发布网友发布时间：2022-04-22 09:03

我来回答

共4个回答

热心网友时间：2022-05-12 11:21

z-index 属性设置元素的堆叠顺序：拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。所以，Z-INDEX: 999表示某个元素的显示在前面的优先级参数为999。注意：

参数越大，表示越会显示在其他堆叠元素之上。

Z-index 仅能在定位元素上有效（例如 position:absolute;）

下面举个例子：

HTML代码给出了内层的3个div，显示的数字即为z-index数值

<div class="outer">
<div class="con1">99</div>
<div class="con2">999</div>
<div class="con3">9</div>
</div

添加css样式，注意内层div的定位方式为relative，并且分别设置了z-index数值

div.outer{width:350px;height:350px;padding:10px;border:1px solid green;}
div.outer div{width:200px;height:200px;padding:0 5px;color:white;font-size:20px;position:relative;}
div.con1{background:red;top:20px;left:20px;z-index:99;}
div.con2{background:green;top:-100px;left:0px;z-index:999;}
div.con3{background:blue;top:-250px;right:-100px;text-align:right;z-index:9;

显示效果，z-index数值越大，显示地越靠前

热心网友时间：2022-05-12 12:39

z-index:999;/*把信息面板提到一个较高的位置，使链接文字过长时不会与面板重叠,但这只对FF有效*/

热心网友时间：2022-05-12 14:13

其实z-index后面的数字，只是说明了层叠的顺序，一般来说，在同一个层叠上下文中，数字越大，其越靠上，如果两个同一个层叠上下文中的元素重叠，那么z-index比较大的一般来说会挡住比较小的。

注意我说的是一般情况，假如说不再一个层叠上下文中的两个z-index的值比较，实际上是没有意义的。在那时候的话，应该是位置比较靠前的那个层叠上下文的中的元素，无论其设置的值为多少，一定会大于比较靠后的那个层叠上下文中的任意一个层叠元素。

至于你说的999，其实这个，你只认为是一个层叠的数字就好，其实在一般开发中，如果用了999，那么下一个，遇到比他还大的呢，用9999，更大的呢，99999？这样我觉得是一个很不好的实践，谨慎使用。

如果你想了解更深入的内容，推荐你一个小文章：层叠上下文和z-index

热心网友时间：2022-05-12 16:05

全部番薯片炸完后，撒上椒盐。