层级问题

本文深入探讨CSS层叠上下文原理,详细讲解标准流、浮动与定位元素间的层级关系,以及z-index属性如何影响元素堆叠顺序。揭示层级高低与元素是否占位无关的真相。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

层级问题 (谁高)

总结:标准流盒子,低于浮动的盒子,浮动的盒子又低于定位的盒子。
定位高于浮动,浮动高于标准流。(高低和占不占位置无关)

(除去static之外)。

用法:
1、必须有定位。(除去static之外)。
2、给定z-index的值为层级的值。(不给默认为0)

1、(层级为0的盒子,也比标准流和浮动高。)
2、(层级为负数的盒子,比标准流和浮动低。)
3、(层级不取小数)
4、(层级一样,后面的盒子比前面的层级高。)
5、(浮动或者标准流的盒子,后面的盒子比前面的层级高。)

定位中:abselute是不占位置的,relative是站位的的。而层级的高低,是和占不占位置没有关系的。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值