CSS中position属性(定位)的特点解析

╰半橙微兮° 2022-05-15 03:16 257阅读 0赞

# CSS position属性 #

--------------------

## position属性之static ##

**作用：**  
使元素定位于**常规/自然流**中  
**特点：**  
（1）left、top、right、bottom属性和z-index属性不生效  
（2）如果两个相邻的元素都设置了margin，两者中最大的才会生效  
（3）如果元素具有固定的宽度和高度，那么把左右边距设置为auto即可达到水平居中的效果。

## position属性之relative ##

--------------------

**作用：**  
使元素成为**可定位的祖先元素**（绝对定位的基准 ）  
**特点：**  
（1）left、top、right、bottom属性和z-index属性可以生效。  
（2）使用了相对定位，元素不会离开常规流。像下图这样。  
![这里写图片描述][70]  
（3）它的使用了绝对定位的后代元素都是以它作为偏移的基准

## position属性之absolute ##

--------------------

**作用：**  
使元素脱离常规流（起到定位的作用）  
**特点：**  
（1）脱离常规流。如下图：  
![这里写图片描述][70 1]  
（2）以设置了relative属性的祖先元素作为定位的基准。  
（3）left、right、top、bottom设置为0，margin设置为auto的时候可以实现水平垂直居中。

## position属性之fixed ##

--------------------

**作用：**  
使元素脱离常规流（起到定位的作用，相对于浏览器窗口做定位）  
**特点：**  
（1）脱离常规流。  
（2）相对于浏览器窗口做定位。  
![这里写图片描述][70 2]

## position属性之sticky ##

--------------------

**作用：**  
制作出吸附的效果  
**特点：**  
（1）不脱离常规流  
（2）跟fixed一样相对于浏览器窗口定位，但因为不脱离常规流，所以不能超过父元素的范围，  
不能大于（大于离不开父元素）也不能小于（小于没有位置放）。  
![这里写图片描述][70 3]

一般来说，绝对定位（absolute）都会结合相对定位（relative）来使用。  
那如果没有父元素设置了相对定位的话，就会根据body标签来进行定位。

下图中黄色的元素（黄色是绿色的父元素）没有设置position:relative属性。所以会根据body标签来定位。（红色边框是body的边界）  
![这里写图片描述][70 4]

而只要给a标签（黄色的元素）**加上position:relative属性**就会变成这个样子。  
![这里写图片描述][70 5]  
绿色元素的偏移量(就是top、left属性的值)跟第一幅图是一样的。

[70]: /images/20220515/6db256b0bfb144b681396535c785fb67.png
[70 1]: /images/20220515/3dd524fd7a934368bd417b94e1f6947c.png
[70 2]: /images/20220515/6b7b4d2babca4358aa7d066d8a644f4b.png
[70 3]: /images/20220515/ba61ef10433c443da59af742636254ec.png
[70 4]: /images/20220515/e06406ccfbfd4146a8f250d5218de68d.png
[70 5]: /images/20220515/d115ff0dadb3489997251e1388991191.png