前言
本文简单介绍了 定位（position）的布局方式。
position
定位（position）是一种更加高级的布局手段，通过定位可以将元素摆放到页面的任意位置。
static：默认值，元素是静止的没有开启定位relative：相对定位absolute：绝对定位fixed：固定定位sticky：粘滞定位
当元素开启了定位以后，可以通过偏移量（offset）来设置元素的位置：
top：定位元素和定位位置上边的距离，越大元素越靠下bottom：定位元素和定位位置下边的距离，越大元素越靠上left：定位元素和定位位置的左侧距离，越大元素越靠右right：定位元素和定位位置的右侧距离，越大元素越靠左
relative
相对定位的特点：
- 元素开启相对定位以后，如果不设置偏移量元素不会发生任何的变化
- 相对定位是参照于元素在文档流中的位置进行定位的
- 相对定位会提升元素的层级
- 相对定位不会使元素脱离文档流
- 相对定位不会改变元素的性质，块还是块，行内还是行内
absolute
绝对定位的特点：
- 开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化
- 开启绝对定位后，元素会从文档流中脱离
- 绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开
- 绝对定位会使元素提升一个层级
- 绝对定位元素是相对于其包含块进行定位的
- 包含块（containing block）一般是离当前元素最近的祖先块元素
- 绝对定位中的包含块就是离它最近的开启了定位的祖先元素
- 如果所有的祖先元素都没有开启定位则根元素就是它的包含块
- html（根元素、初始包含块）
绝对定位布局
开启了绝对定位后，水平方向的布局等式就需要添加left和right两个值，此时规则和之前一样只是多添加了两个值。
当发生过度约束时，如果 9 个值中没有 auto 则自动调整 right 值以使等式满足，如果有 auto，则自动调整 auto 的值以使等式满足。
同样，垂直方向布局的等式的也必须要满足垂直九个值等于包含块的高度。
fixed
固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样。
唯一不同的是固定定位永远参照于浏览器的视口进行定位，固定定位的元素不会随网页的滚动条滚动。
sticky
粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定。
z-index
对于开启了定位的元素，可以通过z-index属性来指定元素的层级：
- 一个整数作为参数，值越大元素的层级越高，元素的层级越高越优先显示
- 如果元素的层级一样，则优先显示靠下的元素
- 祖先的元素的层级再高也不会盖住后代元素
