CSS学习笔记七——定位属性

一、定位属性介绍

position 属性是定位属性，可让某个元素显示在某个位置。
其取值有：static、absolute、relative、fixed 和 sticky。

1. static 静态定位（默认值）
   按照文档流顺序，从左到右、从上到下，与元素显示类型有关；
   不支持 top、left、right、bottom；
2. relative 相对定位
   相对自己原来的位置移动；
   不脱离文档流，仍然占据文档流位置，下一元素不会顶上来；
   可以覆盖在其它元素上；
   支持 top、left、right、bottom，正负值均可；
3. absolute 绝对定位
   脱离文档流，下一元素会顶上来；
   可覆盖在其它元素上，且支持 top、left、right、bottom，正负值均可；
   偏移位置时的参照物有两种：
   一是当没有父元素或父元素没有定位时，参照物是浏览器窗口的 第一屏；
   二是当有父元素且父元素有定位时，参照物是父元素，推荐子元素用绝对定位，父元素用相对定位（子绝父相）；
   父子元素都为绝对定位时，父元素会脱离文档流，不受文档流控制，只能用 top 等设置位置，因此一般更建议子绝父相的用法。
4. fixed 固定定位
   常用于广告位或固定导航栏；
   绝对定位也可以将广告固定在页面上，但当出现滚动条时，广告会被移走，原因在于绝对定位只在第一屏。
   脱离文档流，相对于浏览器的当前窗口，即使滚动滚动条也不会消失；
   支持 top、left、right、bottom，正负值均可；
5. sticky 粘性定位
   可以做吸顶效果，搭配 top 设置在距离顶部多少时吸住；
   该定位是 CSS 3.0 新增，兼容性不好，兼容低版本的浏览器需搭配 JS 实现效果；
   支持 top、left、right、bottom，正负值均可；

二、定位的层级

在上下两个元素同样设置了定位的情况下，当某一元素通过 top 等四个方向偏移位置时，一旦元素之间出现了交叉，就会发生覆盖现象，此时，层级高的元素会显示在最上方。

同一定位的两个元素，在未改变层级的基础上，顺序在后的元素会显示在最上方。

z-index 属性用于改变定位的层级，其取值为整数，值越大，层级越大，元素越靠上显示，同时，该属性可以取负值，表示自降层级。

子绝父相情况下，子元素在父元素的上方，若给父元素设置 z-index 属性为正值，此时，子元素仍在上方，但给子元素设置负值的 z-index 时，子元素会变到下方位置，被父元素彻底覆盖住。

三、元素水平垂直居中

要使元素在屏幕中水平垂直居中，首先将元素设为绝对定位，再将 left 和 top 设为 50%，使得元素到达中轴线的右下方，紧贴中轴线，再通过将 margin-top 和 margin-left 分别设置为元素自身高度、宽度的一半且为负值，使其往回走一部分，从而实现水平垂直居中。

该方法同样适用于子元素在父元素中水平垂直居中的情况，设置子绝父相之后在子元素中使用该方法即可。
注意：margin-top 和 margin-left 不可设为百分比，否则会根据父元素的比例往回走

四、定位与浮动的区别

浮动属于半脱离文档流，而绝对定位属于全脱离文档流。

比较情况：设置上下两个元素，在上元素设置绝对定位时，当下元素没有内容时，视觉效果与设置浮动的效果一致，但在下元素有一定的文本内容时，浮动情况中的文本内容会出现环绕浮动元素的效果，而绝对定位则不会出现该效果。

五、结语

本学习笔记主要用于记录博主个人的前端学习过程，目前学习资源来自b站千锋的前端1000集教学，如笔记内容有写错的地方，希望大家能够指出。同时，欢迎看到博文的小伙伴们与我一同学习！