CSS - position属性详解

相信很多同学在编写、设计网站的时候多多少少用过css里的position这个属性，但是很多时候网页显示出来的和自己想象的不太一样，这篇笔记来教你怎么使用position。

position属性一共有5个不同的值，下表借鉴于W3Schools

熟悉了表格里的属性后，请看如下代码示例：

<div class="outer"> <!-- 黑色 -->
  <div class="inner1"></div> <!-- 红色 -->
  <div class="inner2"></div> <!-- 黄色 -->
  <div class="inner3"></div> <!-- 蓝色 -->
</div>

.outer {
  width: 400px;
  height: 300px;
  background: black;
  margin: auto;
  position: absolute;
  z-index: -1;
}

.inner1 {
  width: 100px;
  height: 100px;
  background: red;
  position: absolute;
}

.inner2 {
  width: 100px;
  height: 100px;
  background: yellow;
  position: relative;
  left: 100px;
}

.inner3 {
  width: 100px;
  height: 100px;
  background: blue;
  position: inherit; /* absolute */
  left: 50px;
  top: 50px;
  /* z-index: -1; */
}

上方代码执行结果

1. 设置了一个外部container，为三个inner的父元素，absolute绝对定位
2. 子元素 inner1 被设为absolute，使其跳出了当前DOM流的约束

• 因为父元素不是static，所以子元素将相对于父元素来定位。
• 当top, bottom, left, right四个属性没有被赋值时，并且父元素里没有其它元素在DOM tree里位于它前面时，它将位于父元素的左上角；有其它元素在它前面时，它将位于此元素下面的左上角。
• 当top, bottom, left, right四个属性被赋值时，它的位置将相对于父元素来定位。
• 如果父元素为static，那么absolute元素将相对于浏览器绝对定位。

3. 子元素 inner2 被设为relative，它将相对于正常位置，通过left, right, top, bottom来定位

• 重要：inner2的left被设置为100px，但它却紧挨着inner1元素，由此可以看出inner1元素因被设置为absolute绝对定位而脱离了DOM，不然inner2应该距离inner1 100px的长度。

4. 子元素 inner3 用来解释inherit和属性z-index

• inner3继承了父元素outer的position属性的值，所以为absolute。
• z-index属性 非常有用，用来设置z轴上元素的排列，也就是上下层叠关系，值越大元素越在上层。z-index在UI布局上发挥了很大作用，让手机屏幕成为了一个三维空间，著名的Material UI对z-index的应用是一个典例。

5. fixed在例子中没有出现，fixed的元素将相对于viewport（视口）进行定位，不受何上下滚动条的约束，感兴趣的同学可以去尝试一下。
6. 最后，给大家一个在线编辑代码的地址，可以去自己尝试一下，自己动手永远记得更加深刻

• CSS position属性尝试 on JSfiddle