position详解

Posted 2021-01-31 shendan

导读：

position的定位类型有：static(默认值)、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）、sticky（粘性定位）。其中最常用的就是relative和absolute了。我们先来区别一下相对定位和绝对定位，最后再详细讲解其它取值分别是什么意思。

---

相对定位和绝对定位

先看看MDN上是怎么解释它们的：

相对定位：相对定位的元素是在文档中的正常位置偏移给定的值，但是不影响其他元素的偏移。

绝对定位：相对定位的元素并未脱离文档流，而绝对定位的元素则脱离了文档流。在布置文档流中其它元素时，绝对定位元素不占据空间。绝对定位元素相对于最近的非 static 祖先元素定位。当这样的祖先元素不存在时，则相对于ICB（inital container block, 初始包含块）。

看到这里是不是一脸懵逼呢？大家可以尽量去感悟理解一下，如果实在理解不了也没事，为了更形象地理解relative(相对定位)和absolute(绝对定位)，我们先来看一段代码：

html：

<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>

CSS：

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;//相对定位
  top: 20px;
  left: 20px;
  background: blue;
}

可以通过Codepen打开尝试：https://codepen.io/sd237720488/pen/oJogNO

相对定位 relative

#two {
  position: relative;//相对定位
  top: 20px;
  left: 20px;
  background: blue;
 }

上面代码用的是相对定位，运行结果如下：

我们可以发现，在相对定位relative的情况下：

如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。——W3school

Two模块：以原本正常位置为参照，向下、向右偏移了20px。
其它元素（One/Three)：均以Two模块正常位置的情况下布局，Two并没有影响其它元素偏移。

绝对定位 absolute

当我们把代码中的position：relative替换成position:absolute，会发生什么呢？

#two {
  position: absolute;//相对定位
  top: 20px;
  left: 20px;
  background: blue;
}

我们可以发现，在绝对定位absolute的情况下：

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。——W3school

Two模块：因为没有已定位的祖先元素，所以它的位置相对于最初的包含块，向下、向右偏移了20px。
其它元素（One/Three)：就像Two不存在一样布局。

---

固定定位 fixed

#one {
  position: fixed;
  top: 80px;
  left: 10px;
}

"One" 元素固定定位在离页面顶部 80px，离页面左侧 20px 的位置。

---

粘性定位 sticky

#one {
position: -webkit-sticky;
position: sticky; 
top: 10px; 
}

以top:10px为临界点，在视图滚动到元素top距离小于10px时,"one"元素为相对定位，超过10px则为固定定位。

sticky为CSS3新增属性。值得注意的是，这个属性的兼容性还不是很好，目前仍是一个试验性的属性，并不是W3C推荐的标准。