css中四大定位模式

目录

一、静态定位：static

二、相对定位：relative

三、绝对定位：absolute

四、固定定位：fixed

 五、定位要点——子绝父相

---

在CSS中，通过position属性定义元素的定位模式，语法如下：

选择器 { position:属性值; }

一、静态定位：static

静态定位是元素的默认定位方式，无定位的意思。它相当于border里面的none，不要定位的时候用。

特点：按照标准流特性摆放位置，它没有边偏移,在布局时我们几乎不用。

二、相对定位：relative

特点：相对于自己原来在标准流中位置来移动的，原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。

三、绝对定位：absolute

特点：绝对定位是元素依据最近的已经定位的父级元素来进行移动，不占用原来在标准流的位置

若父元素没有定位，则以浏览器为准定位(Document 文档)

四、固定定位：fixed

固定定位是绝对定位的一种特殊形式： 如果说绝对定位是一个矩形那么固定定位就类似于正方形

特点：

1. 不占位置

2、跟父元素没有任何关系，单独设置位置

3、不随滚动条滚动

 五、定位要点——子绝父相

子级元素是绝对定位，父级元素要用相对定位，即所谓的子绝父相