这是我参与「第四届青训营 」笔记创作活动的第23天
定位
手动控制元素在包含块中的精准位置
position
position属性
默认值：static静态定位即不定位 relative:相对定位 absolute：绝对定位 fixed：固定定位 position取值不是static的时候，元素称为定位元素
定位元素会脱离常规流（相对定位除外）
一个脱离了常规流的元素：
- 文档流中的元素摆放时，会忽略脱离了文档流的元素
- 文档流中元素计算高度时，会忽略脱离了文档流的元素（高度坍塌）
相对定位
不会导致元素脱离文档流，只是让元素在原来的位置上进行偏移 相对于原来的位置进行定位 左顶点为原点，左顶点的偏移 left：离左边的偏移量，跟margin-left的区别是margin-left会占据包含块一定的宽度，相对定位的偏移，盒子的宽度不变。 还有right、bottom、top，当有冲突的时候以左上为主 相对定位偏移的时候，不会影响其它盒子的位置。
相对定位可以使元素变成定位元素，并且不脱离文档流 主要用于为绝对定位提供包含块
绝对定位
- 宽高为auto时，适应内容，内容决定宽高
- 包含块变化：找祖先元素中第一个定位元素，就是相对于祖先元素中离自己最近的定位元素进行定位，包含块就变成祖先元素中的定位元素的内容盒。如果都不是定位元素，就相对于文档内容进行定位，相对于整个网页。 一张图片覆盖在另一张图片的左上角就经常用定位实现
固定定位
其它情况和绝对定位完全一样
包含块不同：固定为视口（可视化窗口）就是相对于窗口定位
定位下的居中
某个方向居中：
- 定宽（高）
- 将左右（上下）距离设为0 left：0;right:0;
- 将左右margin设置为auto 定位情况下，margin的值为auto时，会吸收剩余空间
或者： 居中的话可以用left:50%;top:50%; 但是它是相对于左顶点的， 所以要向左和向上移动半个长度 margin-left: ...px; margin-top: ...px;
多个定位元素重叠时
堆叠上下文 设置z-index，通常情况下，值越大，就在越上层。 当z-index为负数的时候，会被常规流和浮动元素覆盖。
绝对定位元素一定是块盒，就是会把元素的display变为block 绝对定位和固定定位元素一定不是浮动 没有外边距合并
居中总结
行盒的水平居中（行块盒的居中）
直接在父元素设置text-align：center
常规流块盒水平居中
定宽，然后设置左右margin为auto
绝对定位元素的水平居中
定宽，然后就设置left：0 right：0然后就左右的margin设置为auto
实际上，固定定位（fixed）是绝对定位（absolute）的一种特殊情况
单行文本的垂直居中
1、line-height=height
行块盒或块盒内的多行文本的垂直居中
目前可以设置上下padding，但是这个只能做类似的效果
绝对定位的垂直居中
定高，设置上下坐标为0，将上下margin设置为auto
