定位浮动篇
定位相对定位 relative绝对定位 absolute固定定位 fixed粘性定位 stickyz-index
浮动浮动使用清浮动
定位
页面是分层的： 底层：背景 中层：文字、浮动元素 上层：定位 顶层：z-index定位会提高层级定位元素层级一样高，但是后面的元素层级高于前者。即后者覆盖前者定位都用left、right、top、bottom设置偏移量
相对定位 relative
如果没有设置偏移量，对元素没有影响不会影响元素本身（块级元素还是块级元素，内联块元素还是内联块元素）不会让元素脱离文档流（元素移动后，原始位置还是会被保留）相对于自身发生位移提高层级，高于浮动
绝对定位 absolute
如果没有设置偏移量，对元素没有影响让内联元素支持宽高完全脱离文档流（原始位置不会被保留。浮动脱离文档流，文字会被挤开。绝对定位完全脱离文档流，文字都不会被挤开，直接覆盖掉）如果有定位父元素，则相对于定位父级发生偏移。如果没有则相对于document发生偏移（定位父级：父级中有定位的。document：整个文档）提升层级，高于浮动
固定定位 fixed
与绝对定位基本一致，另外：固定定位只相对于document发生偏移（不会根据定位父级偏移）
粘性定位 sticky
使用场景：此内容本来在页面中间，随滚动条往下滑，快要滑过他的时候，就黏在页面顶部缺点：stycky在浏览器兼容性差，一般用js写，所以不推荐
z-index
z-index 只能加给position，提升position等级z-index 默认0，数值越大，层级越高
浮动
浮动的由来：处理内联块元素留白问题的 使块级元素并行排列的方法： 1.1、设置display为内联块元素（这种方法不设置父元素font-size:0，会导致有6px的留白） 1.2、用float浮动（没有留白）清浮动的由来 浮动元素脱离文档流，不会撑起父级高度（因为是飘起来的）
浮动使用
可以让元素排成一行，并且没有留白脱离文档流，不会撑起父级高度（因为是飘起来的）可以让内联元素支持宽高没有加宽高时，宽高默认由内容撑开同级元素要么都浮动，要么都不浮动，以免出错float:left 内容顺序正常（两个元素都朝左浮动）float:right 内容顺序颠倒（两个元素都朝右浮动）
清浮动
直接给父级高度在父级下面加上给父级加浮动，不推荐（因为同级要么都浮动，要么都不浮动）给父级加overflow:hidden给父级加上clear类（clear用::after添加清浮动，三个属性）注意：clear清浮动只对块级元素有作用
.clear::after{
content: '';
display: block
;
clear: both
;
}
