关于CSS的position四种取值

本文深入解析HTML布局中position属性的四种取值:static、relative、absolute和fixed,帮助开发者掌握每种取值的特点及应用场景,通过实例演示如何灵活运用这些属性实现页面元素的精确定位。

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

关于position的四种取值,自己只是混淆,希望这次总结能加深印象!

position的四种取值为:

static:静态位置,无特殊位置,对象遵循正常文档流,left right top bottom 无用。这个是默认值哦!


relative:相对定位,对象遵循正常文档流,以正常理应所在的位置为基础根据left right top bottom 值进行偏移。在没有设置属性为relative时,对象在文档中会有个位置,设置了此值后,在文档中的位置根据left right top bottom 值进行重新定位。相对定位,相对的是自己本身应该在的位置!


absolute:绝对定位,对象脱离正常文档流,以static之外的最近父元素为参考点进行left right top bottom 值进行偏移。若不存在此属性,则以body为参考点移动,即以窗口为参考点。


fixed:固定定位,对象脱离正常文档流,以窗口即body对象为参考点,参考left right top bottom 值进行偏移。


所以,static和relative的对象都遵循正常文档流,而absolute和fixed是脱离正常稳定流的,在正常文档流中不占位置,有漂浮在页面上的感觉。

relative和absolute和fixed这三种属性的对象,设置left right top bottom 是有效的。

感谢阅读,如有问题,望指出

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值