布局是屏幕平面上的，定位是垂直于屏幕的。
一、分层
首先讲一下CSS垂直方向的分层。以一个div的分层为例：
由分层的图片可看出，背景background的范围是 border 的外沿。并且浮动元素脱离了文档流。
属性 position 就是规定 css 垂直于屏幕的位置。
二、position属性
关于 position 属性值，有以下几点：
- static——默认值，待在文档流中；
- relative —— 相对定位，升高位置，但不脱离文档流；
- absolute —— 绝对定位，定位基准是最近的祖先元素中的定位元素；
- fixed —— 固定定位，定位基准是视口，但是有些属性又能改变这一特性；
- sticky —— 粘滞定位。 下面分开讲述各个属性值的特点：
1、relative
使用场景：
- 用于位移（很少用）
- 给
position: absolute;的元素的父元素添加position: relative;。
2、absolute
position: absolute;—— 脱离原来的位置，另起一层；在子元素position属性值为absolute时，常将该元素的祖先元素添加：position: relative;。
- absolute 是相对于最近的祖先元素中为定位元素定位的。 （定位元素：position 属性值不为默认值static 的元素）
- 如果该元素没有写两个方向的大小（top/bottom、left/right 中的两个），某些浏览器会有位置错乱。
- 负margin 和
left/right:50%;会有居中的效果：例如
left: 50%; margin-left: -宽度/2 ;
或
left: 50%;transform:translateX(-宽度/2)
3、fixed
视口（viewport）—— 用户能看到的页面区域（不包括最上方的标签名和滚动条）。
fixed 是相对于视口定位的，无论如何滑动页面，position值为fixed的元素都会固定在视口内。但是，后面的元素可能会修改这个页面位置，position值为fixed 并不能真的做到元素固定在视口，不推荐使用。且position: fixed;在移动端使用会有很多bug。
fixed 与 absolute 都是使用时需写 top/bottom、left/right 中的两个来保证浏览器不会发生错乱。
4、sticky
position: sticky;—— 粘滞定位，当页面未滑动到该元素时此元素还在文档流中；当划过去此元素后，该元素不会离开视口，而是会粘在顶部。但是此属性值的兼容性较差。
三、层叠上下文
z-index 属性
如上图所示，z-index 属性指定一个元素的堆叠顺序，数值越大越在前面。但是多大也不可能脱离所在的层叠上下文。
层叠上下文
每个层叠上下文都是一个小世界，这个小世界里面的z-index跟外界无关，只有处于同一个层叠上下文里不同值的z-index值才能比较。
如何创建一个层叠上下文？可看 层叠上下文 MDN
常用的创建层叠上下文的方法有：
- position 值为 absolute（绝对定位）或 relative（相对定位）且 z-index 值不为 auto 的元素；
- opacity 属性值小于 1 的元素；
- flex (flexbox) / grid (grid) 容器的子元素，且 z-index 值不为 auto；
- transform 不为 none 的元素；
