position定位讲解

本文详细解析了CSS中的四种定位方式:static、relative、absolute和fixed,包括它们的特点、使用场景及如何通过left、top等属性进行精确布局。同时介绍了z-index属性在元素重叠时的应用。
摘要由CSDN通过智能技术生成

position 属性规定元素的定位类型。

absolute
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
会脱离文档流不占空间
在这里插入图片描述
fixed
生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
在这里插入图片描述
relative
生成相对定位的元素,相对于其正常位置进行定位,仍然占其原来的位置。
在这里插入图片描述
static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)

z-index:当我们的元素发生重叠的时候可以通过z-index:数值越大就代表该权限越高越前面
个人github:https://github.com/webxingkong
如有不正确的地方请指教联系修改,后期将不断更新,谢谢你们的支持

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值