position属性
介绍： CSS position属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。
position 属性值
static
介绍： 该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
.box {
position: static;
}
relative
介绍： 该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。
.box {
position: relative;
top: 40px;
left: 40px;
}
position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
absolute
介绍：元素会被移出正常文档流，并不为元素预留空间，该元素会相对于最近的非 static 定位祖先元素左上角为坐标原点进行偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
.box {
position: absolute;
top: 40px;
left: 40px;
}
fixed
介绍：元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）左上角为坐标原点进行偏移。元素的位置在屏幕滚动时不会改变。fixed 属性会创建新的层叠上下文。
.box {
position: fixed;
top: 40px;
left: 40px;
}
注意：fixed一般都会以页面左上角作为坐标原点，但是如果该元素中存在某个祖先元素设置了 transform, perspective 属性，或 filter 属性非 none 时，元素将会以该祖先左上角作为坐标原点。
sticky（粘性定位）
介绍：元素根据正常文档流进行定位，然后相对它的最近滚动祖先和最近块级元素祖先，包括table-related元素进行偏移。粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位偏移值不会影响任何其他元素的位置。
/*
在 viewport 视口滚动到元素 top 距离小于 20px 之前，元素为相对定位。
之后，元素将固定在与顶部距离 20px 的位置，直到 viewport 视口回滚到阈值以下。
*/
.box {
position: -webkit-sticky;
position: sticky;
top: 20px;
}
该值总是创建一个新的层叠上下文（stacking context）。注意，一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时）
层叠上下文（补充）
概念：层叠上下文是HTML元素的三维概念，这些HTML元素在一条垂直于电脑屏幕或网页的 z 轴上延伸，HTML 元素依据其自身层叠水平（元素的优先显示顺序）占用层叠上下文的空间
定位相关属性
z-index：设置元素的层叠水平，该属性设定了一个定位元素及其后代元素。当元素之间重叠的时候， z-index 较大的元素会覆盖较小的元素在上层进行显示。
.box {
position: absolute;
/* 字符值 */
z-index: auto;
/* 整数值 */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1;/* 使用负值降低优先级 */
}
- auto： 盒子不会创建一个新的本地堆叠上下文。在当前堆叠上下文中生成的盒子的堆叠层级和父级盒子相同。
-
<整数值>： （整型数字）是生成的盒子在当前堆叠上下文中的堆叠层级。此盒子也会创建一个堆叠层级为 0 的本地堆叠上下文。这意味着后代（元素）的 z-indexes 不与此元素的外部元素的 z-indexes 进行对比。
注意： z-index 必须配合 relative、 absolute、 fixed、 sticky 使用。
位置属性：CSS通过 top、right、bottom、left 这四个属性定义了定位元素的上、右、下、左外边距边界与其参照元素对应边之间的偏移，非定位元素设置此属性无效。
位置属性的效果取决于元素的position属性：
- 当position设置为absolute或fixed时，位置属性指定了定位元素与其包含参照元素对应方向边距之间的偏移。
- 当position设置为relative时，位置属性指定了元素的对应方向边界与自身初始位置的偏移。
- 当position设置为sticky时，如果元素在viewport里面，位置属性的效果和relative等同；如果元素在viewport外面，位置属性的效果和position为fixed等同。
- 当position设置为static时，位置属性无效。
- 当left和right同时指定时，元素的位置会被重复指定。当容器是从左到右时，left的值会被优先设定；当容器是从右到左时，right的值会被优先设定。
- 当top和bottom同时指定时，并且 height没有被指定或者指定为auto的时候，top和bottom都会生效，在其他情况下，如果 height被限制，则top属性会优先设置，bottom属性则会被忽略。
vertical-align (补充)
CSS 的属性 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。
img {
vertical-align: baseline | top | middle | bottom | sub | text-top;
}
- baseline：使元素的基线与父元素的基线对齐。HTML规范没有详细说明部分可替换元素的基线，如