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