css四大定位解析

1. 元素的定位属性

元素的定位属性主要包括定位模式和边偏移两部分。

1、边偏移

在CSS中，通过边偏移属性top、bottom、left、right，来定义定位元素的位置，其取值为不同单位的数值或百分比。具体解释如下表所示：

边偏移属性	描述
top	顶部偏移量，定义元素相对于其父元素上边线的距离
–	–
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
–	–
left	左边偏移量，定义元素相对于其父元素左边线的距离
–	–
right	右边偏移量，定义元素相对于其父元素右边线的距离

| | |

也就是说，定位需要结合边偏移搭配使用， 比如说 top: 50px; left: 50px; 等

2、定位模式

在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：

选择器{position:属性值;}

position常用的属性值

值	描述
static	自动定位（默认定位方式）
–	–
relative	相对定位，相对于原文档流的位置进行定位
–	–
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
–	–
fixed	固定定位，相对于浏览器窗口进行定位

2. 静态定位 static

静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。

上面的话通俗简单的来说： 就是网页中所有元素都默认的是静态定位哦！ 其实就是标准流的特性。

在静态定位状态下，无法通过边偏移属性（top、bottom、left、right）来改变元素的位置。

3. 相对定位 relative

相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。

对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留，而且移动的位置是相对于自身原来的位置来说的。如下图所示，即是一个相对定位的效果展示

注 意 ： 相 对 定 位 最 重 要 的 一 点 是 ， 它 可 以 通 过 边 偏 移 移 动 位 置 ， 但 是 原 来 的