背景色，border外边沿围成的区域
布局是屏幕平面上的
定位是垂直于屏幕的
div分层
脱离文档流其实是比文档流元素要稍微高一点了
文字内容也算内联元素，这个部分是谁后出现，谁最上面
可知，同层元素也是谁在后，谁就在上面
postion属性，可以让元素处于最上层
position
static 默认值， 呆在文档流里
relative 相对定位，升起来，但是不脱离文档流
absolute 绝对定位，定位基准是祖先里的非static
fixed 固定定位，定位基准是viewpor（有很多bug）
sticky 粘性定位
postion: relative
相对定位的元素是在文档中的正常位置偏移给定的值，但是不影响其他元素的偏移。就是先按正常文档流布局，然后再偏移
使用场景
用于做位移（很少用）
用于给absolute元素做定位
配合z-index
z-index: auto 默认值，不创建新层叠上下文
postion: absolute
相对定位的元素并未脱离文档流，而绝对定位的元素则脱离了文档流。在布置文档流中其它元素时，绝对定位元素不占据空间。绝对定位元素相对于最近的非static祖先元素定位。当这样的祖先元素不存在时，则相对于ICB（inital container block, 初始包含块）。
使用场景
脱离原来的位置，另起一层，比如对话框的关闭按钮
鼠标提示
经验
某些浏览器不写top / left 会位置错乱
善用left: 100%
善用left: 50%; 加负 margin
position: fixed
固定定位与绝对定位相似，但元素的包含块为 viewport 视口。该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。
使用场景
烦人的广告
回到顶部按钮
很多坑
视口(viewport):用户可以看到的区域，不包括滚动条
postion: strick
粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。当这样的祖先元素不存在时，则相对于ICB（inital container block, 初始包含块）。
该值总是创建一个新的层叠上下文（stacking context）。
absolute是相对于祖先元素中最近一个定位元素定位的
定位元素：只要不是static
要想一个absolute元素相对与relative元素位置居中:
- left: 50%;
- top: 50%;
- transform:tanslate(-50%， -50%);
层叠上下文
普通流中不含有定位属性的标准块元素始终先于定位元素渲染并出现在定位元素的下层，即便它们在HTML结构中出现的位置晚于定位元素也是如此。
每个层叠上下文相当于一个小世界（脱离文档流了），只有同级的层叠上下文能比较！！！
就相当于一个作用域，用来排有层叠上下文元素的z轴方向的位置（z-index 需要有对于一个已经定位的盒子即position不为static）
哪些元素有层叠上下文：需要记忆
