阅读 103

part04 CSS核心样式(定位)

定位属性position

  • 属性名:position

  • 属性值:

relative  相对定位
absolut   绝对定位
fixed     固定定位复制代码
  • 作用:设置定位的元素,他需要根据某个参考元素发生位置的偏移。

偏移量属性

  • 定位的元素要想发生位置的移动,必须搭配偏移量属性进行设置。

  • 水平方向:left、right。

  • 垂直方向:top、bottom。

  • 属性值:常用px为单位的数值,或百分比。

相对定位(绝对定位的参考元素)

  • 属性值:relative,相对的意思。

  • 参考元素:标签加载的原始位置

  • 必须搭配偏移量属性才能发生位置移动。

  • 例:01.png

  • 性质:相对定位的元素不脱离标签的原始状态(标准流、浮动),不会让出原来占有的位置。(原位留坑,形影分离)

01.png01.png

绝对定位

  • 属性值:absolute,绝对的意思。

  • 参考元素:参考的是距离最近的定位的祖先元素,如果祖先都没有定位,参考body(首屏页面)。

  • 必须搭配偏移量属性才发生位置移动。

  • 例:01.png

  • 性质:绝对定位的元素脱离标准流,会让出标准流位置,可以设置宽高,也可以随时定义位置,绝对定位的元素不设置宽高只能被内容撑开。

注意:

  1. 绝对定位的参考员是是不固定的,不同的窗口元素以及不同的偏移量组合会导致绝对定位元素的参考点不同,具体位移效果不同。

  2. 在绝对定位中,由于参考点不同,left正值不在等价于right的负值。

01.png(子绝父相,子绝父绝,子绝父固)01.png

固定定位

  • 属性值:fixed,固定的意思。

  • 参考元素:浏览器窗口。

  • 参考点:浏览器窗口的四个顶点。跟偏移量有关。

  • 由于浏览器窗口的四个顶点位置不会发生变化,会导致固定定位的元素会始终显示在定位位置。

  • 例:01.png

  • 性质:固定定位的元素脱离标准流,让出标准流位置,可以设置宽高,根据偏移量属性可以任意设置在浏览器窗口的位置。固定定位的元素会始终显示在浏览器窗口上。

定位应用

01.png01.png01.png例:

position:absolute;
left:50%;
width:100px;
margin-left:-50px;复制代码

01.png

压盖顺序

01.png01.png


作者:一个小白的前端之路
链接:https://juejin.cn/post/7068863518463770655


文章分类
代码人生
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐