布局与定位的区别：定位是垂直于屏幕，布局是屏幕平面的。
div分层
- 一个div可以分成多层。文字内容在最上面，然后是浮动div，正常div，然后是border，background在最下面。 （浮动元素向上浮起，脱离文档流）
position的五个取值
-
static:默认值，在文档流中，可不写。
-
relative:相对定位，升起来但不脱离文档流；相对位置改变，但是绝对位置还是不变的。
- 使用场景：做位移，给absolute元素做父元素
- 配合z-index（xyz轴中Z轴定位），层叠上下文
-
absolute：绝对定位，定位基准是祖先里的非static
- 使用场景：脱离原来的位置，另起一层。
- （white-space：nowrap：文字内容不换行）
- 配合z-index
- ⭐absolute相对于祖先元素中最近的一个定位元素（非static属性）定位的。偏移值由top，bottom，left，right确定。
- 善用left:50%; left:100%;以及-margin;
-
fixed：固定定位
- 使用场景：相对于屏幕视口（viewport）定位，元素在页面滚动时位置不会改变。
- 尽量别用，坑
-
sticky：粘滞定位，适用于导航。
- 经验：
- 写了absolute一般都会补一个relative。
- 写了absolute或者fixed一定要补top和left。
层叠上下文
⭐如z-index正负数效果相反，正数越大浮的越高，负数越小，浮的最低。
处于同一个小世界的z-index才可以相互比较。
-
哪些不正交的元素可以创建层叠上下文？
- MDN
- 需要记忆的：z-index,flex,opacity小于1时,transform
