相对定位和绝对定位的介绍及使用:

定位:当元素设置了定位属性后,是一个脱离标准流的状态,可以将该元素设置到网页的一个具体的坐标位置,不会影响其他周围的元素.
①.相对定位:position: relative;
相对定位:也叫占位定位,在移动的时候是一个脱离标准流的状态,可以通过四个偏移量设置元素在网页中的位置,默认参考点是元素自身在标准流的位置。
偏移量:left: 正值向右,负值向左
right:正值向左,负值向右
top: 正值向下,负值向上
bottom:正值向上,负值向下
当四个偏移量同时存在时,left和top优先。
②.绝对定位:position: absolute;
绝对定位: 是一个完全脱离标准流的状态,默认left和top是网页的左上,默认right和bottom是当前窗口的右下。
偏移量: left: 正值向右,负值向左
right:正值向左,负值向右
top: 正值向下,负值向上
bottom:正值向上,负值向下
当四个偏移量同时存在时,left和top优先。
③.相对定位和绝对定位配合使用:
(子绝父相):父子指的是标签的嵌套关系,绝是表示子元素是绝对定位,相是表示父元素是相对定位;
(子绝父绝):父子指的是标签的嵌套关系,绝是表示子元素是绝对定位,相是表示父元素是绝对定位。
总结:加了绝对定位的元素会找离它最近的加了定位属性的父辈元素为参考点。
④.定位的层级:层级属性z-index: 0
默认层级都是0,当层级相同时,后写的标签会压在先写标签的上面,当层级不同时,层级高的压在层级低的上面。
层级的取值范围: 整数(正整数,负整数,零)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值