position属性与z-index属性详解,如何比较z-index值确定覆盖关系,为何z-index属性不生效。

目录

position属性含义

absolute

relative

fixed

z-index含义

比较规则

注意


position属性含义

static

默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

absolute

设置后处在原本出生位置,定位是相对设置了absolute、relative或fixed的上级元素进行定位,当所有的父级都无这些属性时,相对整个页面设置,不是相对body,因为body4面都有8px的外边距。原先在文档中的占位会释放,对后续文档会有影响。

relative

设置后处在原本出生位置,定位是相对原来的位置进行定位。原先在文档中的不会释放,对后续文档无影响。所以常在父集元素中用relative,子集元素用absolute进行相对定位

fixed

设置后处在原本出生位置,定位是相对整个页面进行定位。原先在文档中的占位会释放,对后续文档会有影响。

sticky

基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed,它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。

z-index含义

z-index(决定覆盖关系,为整数,可负):因为设置了absolute、relative、fixed后会脱离文档流,而脱离了文档流后,会有覆盖关系,未脱离文档流之前会像输入文字一样,是不会重叠的,所以只有对设置了absolute、relative、fixed的元素生效,设置值后z-index属性默认为0(虽然浮动流也会脱离文档流,但设置z-index值是不会生效的)

比较规则

1.不同大小,值大的覆盖小,相同大小,以出生先后决定覆盖关系,后面出生的覆盖前面的。

2.只有相同父集的才能直接比较(即兄弟节点之间能比较),例如下图中b和B才能直接比较。

3.不同的父集时,需将2元素都转换为兄弟节点才能进行比较(即取他们的父集的z-index值进行比较,如果没有直接设置z-index,则用子孙的,并可以依次往下取,都没有才默认为0)。例如下图,我们比较C和d的z-index值时,先转化为相同父集的兄弟元素即B和b比较,b取自身的z-index值,如果没有就取c的,再没有才取d的,都没有则默认为0,B也同样。

4.z-index>=0的元素会覆盖浮动流设置了float:left/right,这些元素也会脱离文档流,且是覆盖在文档流上面的和文档流的元素,即只设置了absolute、relative、fixed的元素会覆盖文本或浮动元素,而当再设置z-index=负数时,会被文档流的元素覆盖(我们可以把文档流和浮动流的元素z-index分别当做等于-0.5和-0.25)。

<div class="a">
		<div class="b">
			<div class="c">
				<div class="d"></div>
			</div>
		</div>
		<div class="B">
			<div class="C"></div>
		</div>
</div>

注意

设置了position:absolute、relative、fixed不会改变元素display类型,设置了float:left/right会将元素转换为inline-block元素,可以通过是否覆盖文字来验证,设置了position的会覆盖文字,而float不会,因为带有inline属性的都不会覆盖文字。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值