相信很多同学在编写、设计网站的时候多多少少用过css里的position这个属性，但是很多时候网页显示出来的和自己想象的不太一样，这篇笔记来教你怎么使用position。
position属性一共有5个不同的值，下表借鉴于W3Schools
| 值 | 描述 |
|---|---|
| absolute | 生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过left, right, top, bottom进行规定 |
| fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过left, right, top, bottom进行规定 |
| relative | 生成相对定位的元素，相对于其正常位置定位。元素的位置通过left, right, top, bottom进行规定 |
| static | 默认值，忽略 top, bottom, left, right和z-index |
| inherit | 从父元素继承该属性的值 |
熟悉了表格里的属性后，请看如下代码示例：
<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; */
}
上方代码执行结果
- 设置了一个外部container，为三个inner的父元素，absolute绝对定位
- 子元素 inner1 被设为absolute，使其跳出了当前DOM流的约束
- 因为父元素不是static，所以子元素将相对于父元素来定位。
- 当top, bottom, left, right四个属性没有被赋值时，并且父元素里没有其它元素在DOM tree里位于它前面时，它将位于父元素的左上角；有其它元素在它前面时，它将位于此元素下面的左上角。
- 当top, bottom, left, right四个属性被赋值时，它的位置将相对于父元素来定位。
- 如果父元素为static，那么absolute元素将相对于浏览器绝对定位。
- 子元素 inner2 被设为relative，它将相对于正常位置，通过left, right, top, bottom来定位
- 重要：inner2的left被设置为100px，但它却紧挨着inner1元素，由此可以看出inner1元素因被设置为absolute绝对定位而脱离了DOM，不然inner2应该距离inner1 100px的长度。
- 子元素 inner3 用来解释inherit和属性z-index
- inner3继承了父元素outer的position属性的值，所以为absolute。
- z-index属性 非常有用，用来设置z轴上元素的排列，也就是上下层叠关系，值越大元素越在上层。z-index在UI布局上发挥了很大作用，让手机屏幕成为了一个三维空间，著名的Material UI对z-index的应用是一个典例。
- fixed在例子中没有出现，fixed的元素将相对于viewport（视口）进行定位，不受何上下滚动条的约束，感兴趣的同学可以去尝试一下。
- 最后，给大家一个在线编辑代码的地址，可以去自己尝试一下，自己动手永远记得更加深刻
