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

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

声明声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:11247931@qq.com