CSS-定位

重要！前言必读！

本章节主要学习的是css的定位，css定位（position），css定位有5个值：static、relative、fixed、absolute、stick，以及重叠定位（z-index）。

定位：position

注意！position是用于元素的定位方法的类型。

• static（静态/不变的，不受影响，正常流进行定位）
• relative（相对定位的元素，受影响，可能偏离进行定位）
• fixed（相对于视口定位，滚动页面，始终位于同一位置）
• absolute（相对于最近的定位祖先元素进行定位）
• sticky（元素根据用户的滚动位置进行定位）

---

position：static

注意！position：static是静态/不变的，不受影响，正常流进行定位，这里的不受影响是指不受定位元素的辅助属性：top、bottom、left 和 right 的影响。’

代码图

效果图

---

position：relative

注意！position：relative相对定位的元素，受影响，可能偏离进行定位，这里的受影响是指受定位元素的辅助属性：top、bottom、left 和 right 的影响，位置会偏离。

代码图

效果图

---

position：fixed

注意！position：fixed是相对于视口定位，滚动页面，始终位于同一位置。

代码图

效果图

---

position：absolute

注意！position：absolute是相对于最近的定位祖先元素进行定位，除 static 以外

代码图

效果图

---

position: sticky

注意！position: sticky是元素根据用户的滚动位置进行定位。

代码图

效果图

重叠定位：z-index

注意！z-index是用于重叠定位，指定元素的堆栈顺序，也就是哪个元素应放置在其他元素的前面或后面，值是正负值，正在前，负在后。

代码图

效果图