1.定位、布局的区别
布局是平行于屏幕的，定位是垂直于屏幕的
了解定位前，复习一下盒模型和文档流
一个盒模型的背景background的范围是？和border的位置关系是？
border是覆盖background的，即在背景上一层。
内容和边框的位置关系是？
内容在边框上一层。
所以，垂直于屏幕，从上到下依次是文字内容（内联子元素）、浮动元素、块级子元素、边框、背景。
解释浮动元素（浮动div，比如float:left;）为什么会高于块级子元素（正常div）？
当给一个div加上float:left;的属性时，它会脱离正常文档流，即垂直于屏幕浮动起来，比之前高一点，不再受正常文档流的约束。
2.用于定位的属性position及其取值
static
默认值，使得元素处于正常文档流中，一般不用写
relative
相对定位，元素会浮动起来，但是不脱离文档流，定位基准是自身
元素在文档流中的实际位置不会改变，只是显示位置会出现偏移
absolute
绝对定位，元素脱离文档流，定位基准是祖先元素里的非static
fixed
固定定位，定位基准是viewport
sticky
粘滞定位
一些经验
1.如果写了absolute，一般都要补上relative
2.如果写了absolute或者fixed，一定要补left和top
3.sticky兼容性很差，主要用于面试装杯
3.详解relative
第一种用法：用于作位移，用得极少
元素浮动起来，相对原位置可以有一个偏移，但是不脱离文档流，实际位置没有改变
position:relative;
left:10px;
top:10px;
元素相对原位置向右、向下移动了10px
第二种用法：用于给absolute做爸爸
先了解一下z-index的用法
z-index的默认值是auto，即不创建层叠上下文
z-index的取值可以是-2、-1、0、1、2等，数值大的元素会在垂直于屏幕方向覆盖住数值小的元素
学会管理z-index
4.详解absolute
使用场景（常用）
脱离原来的位置，另起一层，比如对话框的关闭按钮
鼠标提示
使用方法
相对定位的元素并未脱离文档流，而绝对定位的元素则脱离了文档流。在布置文档流中其它元素时，绝对定位元素不占据空间。绝对定位元素相对于最近的非 static 祖先元素定位。
5.详解fixed
定位基准是视口viewport
6. 层叠上下文
每个层叠上下文都是一个小世界
处在同一个小世界的z-index才能互相比较
哪些属性可以创建层叠上下文
z-index/flex/opacity/transform
什么是层叠上下文
如果一个元素被定位了，即position的值为relative/absolute/fixed/sticky，那么这个元素会处于文字内容的上面或者下面
定位元素的z-index的值为0/1/2...，该元素在垂直于屏幕方向处于文字内容上方；
定位元素的z-index的值为-1/-2/-3...，该元素在垂直于屏幕方向处于文字内容下方。
