css中position的理解

本文详细介绍了网页定位的四种方式:static、relative、absolute、fixed,解释了每种定位方式的特点及用法,帮助开发者更好地理解和运用网页布局。

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

position:static、relative、absolute、fixed

static:没有定位,元素出现在正常的流中。position的缺省值,设置position:static的情况下,left、top、right、bottom无效。

relative:生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。使用absolute时要注意它的非static定位的父元素是谁,这样才可以正确的出效果。

fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可以用来设置永远悬浮在同一个位置的广告栏、置顶按钮等。

inherit:规定应该从父元素继承position属性的值。

注意:left、top、right、bottom只在非static的情况下有效。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值