CSS属性之定位属性(图文详解)

2020-04-27 07:28:31易采站长站整理

<li><a href="#">网页栏目</a></li>
<li><a href="#">网页栏目</a></li>
<li><a href="#">网页栏目</a></li>
</ul>
</div>
</div>
</body>
</html>

5、z-index属性:

z-index属性:表示谁压着谁。数值大的压盖住数值小的。

有如下特性:

(1)属性值大的位于上层,属性值小的位于下层。

(2)z-index值没有单位,就是一个正整数。默认的z-index值是0。

(3)如果大家都没有z-index值,或者z-index值一样,那么在HTML代码里写在后面,谁就在上面能压住别人。定位了的元素,永远能够压住没有定位的元素。

(4)只有定位了的元素,才能有z-index值。也就是说,不管相对定位、绝对定位、固定定位,都可以使用z-index值。 而浮动的元素不能用

(5)从父现象:父亲怂了,儿子再牛逼也没用。意思是,如果父亲1比父亲2大,那么,即使儿子1比儿子2小,儿子1也能在最上层。

针对(1)(2)(3)条,举例如下:

这是默认情况下的例子:(div2在上层,div1在下层)

现在加一个

z-index
属性,要求效果如下:

第五条分析:

z-index属性的应用还是很广泛的。当好几个已定位的标签出现覆盖的现象时,我们可以用这个z-index属性决定,谁处于最上方。