CSS中position的4种定位详解

本文详细介绍了CSS中的position属性的四种取值:static、fixed、relative、absolute。static默认值,元素正常显示;fixed相对于浏览器窗口定位;relative相对于自身定位;absolute相对于第一个有定位的祖先元素或初始包含块定位。

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

大家都知道,css中的position有4种取值,分别是static、fixed、relative、absolute。

详细解释:

static:相当于没有定位,元素会出现在正常的文档流中。

fixed:元素框的表现类似于absolute,但是fixed是相对于视窗本身,也就是浏览器窗口而定位的。所以,采用该定位的元素在页面下拉的时候,其位置并不会发生变化。

relative:生成相对定位的元素,相对于元素本身的位置进行定位,它原本所占的空间仍然会保留。

absolute:生成绝对定位的元素,相对于static定位以外的第一个有定位的祖先元素进行定位。由于static定位相当于没有定位,所以absolute定位实际上就是相对于有定位的第一个祖先元素定位,如果所有的祖先元素都没有定位,则相对于初始包含块或者画布,一般就是body元素定位。

转载于:https://my.oschina.net/LuckyWinty/blog/636672

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值