CSS定位position总结（超详细哦！）

---

前言

开始学习css页面布局时，先接触到的有 标准流 或 浮动，但是经过后续的学习发现有些场景很难通过标准流 或 浮动来快速实现。
例如：
场景1： 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。
场景2：当我们滚动窗口的时候，盒子是固定屏幕某个位置的。
这个时候我们就需要学习新的布局方法了——定位（position）

---

一、定位(position) 介绍

1、为什么使用定位

1. 标准流 可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。

2.浮动 float 只可以让多个块级盒子 一行 没有缝隙排列显示或者左右对齐盒子， 经常用于横向排列盒子。

3.定位 position 则是可以让盒子 自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子，有层叠的概念，就是可以让多个盒子前后叠压来显示。

2、定位组成

定位：将盒子定在某一个位置，所以定位也是在摆放盒子， 按照定位的方式移动盒子

定位也是用来布局的，它有两部分组成：

定位 = 定位模式 + 边偏移

• 定位模式 用于指定一个元素在文档中的定位方式。

• 边偏移则决定了该元素的最终位置。

二、 定位模式 (position)

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

选择器 {
    
    position: 属性值; 
}

定位模式决定元素的定位方式 ，它通过 CSS 的 position 属性来设置，其值可以分为四个：

值	语义
static	静态定位
relative	相对定位
absol	绝对定位
fixed	固定定位

1、边偏移（方位名词）

边偏移 就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性。

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

定位的盒子有了边偏移才有价值。
一般情况下，凡是有定位地方必定有边偏移。

2、定位模式介绍

1.1 静态定位(static) - 了解

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

• 语法：

选择器 {
    
    position: static; 
}

• 静态定位 按照标准流特性摆放位置，它没有边偏移。

• 静态定位在布局时我们几乎不用的

1.2 相对定位(relative) - 重要

• 相对定位是元素在移动位置的时候，是相对于它自己原来的位置来说的