CSS-position

前言：

---

定位允许您从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。

CSS的position属性用于指定一个元素在文档中的定位方式。top，right，bottom和 left属性则决定了该元素的最终位置。

分别有五个属性：

• static,
• relative
• absolute
• fixed
• sticky
  
  

静态定位（static）：

---

默认值, 也就是默认 position 不写的话就是 static 的属性值，它只是意味着“将元素放入它在文档布局流中的正常位置。

相对定位（relative）：

---

相对定位与静态定位非常相似，占据在正常的文档流中，除了你仍然可以修改它的最终位置，包括让它与页面上的其他元素重叠。

设定 relative 后, 然后再给他一个 top 和 left 属性, 他就会相对自己的位置去移动, 而且自身所占的空间不会被挤掉。

top, bottom, left, 和 right 来精确指定要将定位元素移动到的位置。（这些属性的值可以采用逻辑上期望的任何单位 ——px，mm，rems，％等。）

绝对定位（absolute）：

---

absolute 属性脱离文本流, 常与 relative 结合使用, 实现一些垂直居中, 定位技巧, 三栏布局等样式。

注意： absolute 根据父级元素是否有除了 position: static 属性来判断依据哪个元素定位。

绝对定位的元素不再存在于正常文档布局流中。相反，它坐在它自己的层独立于一切。

拓展：z-index
绝对定位不存在正常文档流中，这样就会出现重叠的问题，z-index 值影响定位元素位于该轴上的位置；正值将它们移动到堆栈上方，负值将它们向下移动到堆栈中。默认情况下，定位的元素都具有z-index为auto，实际上为0，这样就能决定绝对定位元素展示顺序。

固定定位（fixed）：

---

fixed 这个属性是依据 浏览器窗口 来实现的定位，常用场景就是一些浮窗广告，或者固定侧边栏。

固定定位（sticky）：

---

sticky基本上是相对位置和固定位置的混合体，也就是说它不脱离文档流, 占用位置空间，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点，当然它是被父元素限制的。

常用于一些文档流的内容，滚动超出屏幕后固定显示的场景。