part04 CSS核心样式(定位)
定位属性position
属性名:position
属性值:
relative 相对定位 absolut 绝对定位 fixed 固定定位复制代码
作用:设置定位的元素,他需要根据某个参考元素发生位置的偏移。
偏移量属性
定位的元素要想发生位置的移动,必须搭配偏移量属性进行设置。
水平方向:left、right。
垂直方向:top、bottom。
属性值:常用px为单位的数值,或百分比。
相对定位(绝对定位的参考元素)
属性值:relative,相对的意思。
参考元素:标签加载的原始位置
必须搭配偏移量属性才能发生位置移动。
例:
性质:相对定位的元素不脱离标签的原始状态(标准流、浮动),不会让出原来占有的位置。(原位留坑,形影分离)
绝对定位
属性值:absolute,绝对的意思。
参考元素:参考的是距离最近的定位的祖先元素,如果祖先都没有定位,参考
body
(首屏页面)。必须搭配偏移量属性才发生位置移动。
例:
性质:绝对定位的元素脱离标准流,会让出标准流位置,可以设置宽高,也可以随时定义位置,绝对定位的元素不设置宽高只能被内容撑开。
注意:
绝对定位的参考员是是不固定的,不同的窗口元素以及不同的偏移量组合会导致绝对定位元素的参考点不同,具体位移效果不同。
在绝对定位中,由于参考点不同,left正值不在等价于right的负值。
(子绝父相,子绝父绝,子绝父固)
固定定位
属性值:fixed,固定的意思。
参考元素:浏览器窗口。
参考点:浏览器窗口的四个顶点。跟偏移量有关。
由于浏览器窗口的四个顶点位置不会发生变化,会导致固定定位的元素会始终显示在定位位置。
例:
性质:固定定位的元素脱离标准流,让出标准流位置,可以设置宽高,根据偏移量属性可以任意设置在浏览器窗口的位置。固定定位的元素会始终显示在浏览器窗口上。
定位应用
例:
position:absolute; left:50%; width:100px; margin-left:-50px;复制代码
压盖顺序
作者:一个小白的前端之路
链接:https://juejin.cn/post/7068863518463770655