一文弄懂 CSS 定位：position

0、引言

这份笔记是记录在 b 站上看到一个视频，讲 CSS 的定位方式，内容非常好，因此记录下来。视频地址见文末。

1、为什么会有 positon 定位

我们知道每个布局都是盒子，期望布局像搭积木一样，从上往下挨个堆盒子，就能完成各式各样的页面，然而多实现几个页面就会发现：文档流中任意一个元素位置调整都会影响后面的元素。

有一种脱离文档流的解决办法就是浮动，但浮动规则的局限性很大，它会向左上角或右上角靠过去，可惜这两个方向并不是布局的全部。日益增长的网页复杂度，和落后的 CSS 布局方式之间的矛盾越来越大，让定位需求变得越来越复杂。

2、基于定位的常见需求

1. 让元素可以相对于它自己的位置定位

2. 让元素可以在父元素（某个祖先级容器）范围内任意位置定位

3. 让元素可以在屏幕范围内任意位置定位

3、不同需求的解决方案

第一种需求：可以使用 relative 定位。

首先设置元素的 position 为 relative，让元素准备偏移，此时从视觉上来看它并没有发生任何变化。

接下来设置top right bottom left 来让元素偏移。

.relative-box {
  position: relative;
  top: 20px;  /* 元素上边界与它原本位置的上边界距离20px，其他类似 */
}

注意：

• 相对定位的元素没有脱离文档流
• 相对定位不会影响其他元素
• 对非定位元素设置 top 等方向属性是没有效果的

第二种需求：使用 absolute 定位。

想要设置某个元素相对于某个祖先级元素容器定位，这就意味着元素不被限制在父容器内，因此浮动是肯定不行的（浮动只能在父容器里作威作福）。这就需要一种完全脱离文档流的定位方式：positon: absolute。

不再区分这个元素是块级元素还是行内元素，它的父容器会将它视为不存在。

首先设置元素的 position 为 absolute，然后对它的祖先级元素容器设置标识 position: relative，这样就可以让它可以相对于被标识的元素定位，最后通过 top right bottom left 来让该元素在标识容器内偏移。

/* 
	对于没有指定宽高的绝对定位元素，同时设置 top right bottom left，这些属性会同时生效。
	下面这段代码能让元素在目标容器中完美居中
*/
.box {
  position: relative;
}

.absolute {
  top: 20px;
  right: 20px;
  bottom: 20px;
  left: 20px;
}

第三种需求：使用 fixed 定位。

这种定位方式会讲元素移出正常文档流，并且它是相对于屏幕视口来指定元素位置。元素的位置在屏幕滚动时不会改变。

首先为元素设置 position: fixed，这时候必须为该元素设置宽高，最后通过 top right bottom left 来让该元素在标识容器内偏移。

.fixed {
  position: fixed;
  right: 10px;
  bottom: 10px;
  width: 20px;
  height: 20px;
}

---

原视频地址