js布局详解（2020/09/19）

float

<style>
     .box1{
	     width:89px;
	     height:30px;
	     background-color:abfa;
	     float:right; //浮于父元素之上
</style>

设置float的box将脱离文档流，后续文档向前补充

如果不设置float两个box只能上下排，因为第一个有隐藏空间，当两个都设置float就可以横向排列。（块元素独占一行）

定位（position)

/*
static    无定位
relative  相对定位
absolute  绝对定位
fixed     固定定位
sticky    粘滞定位
*/

偏移量offset,与margin区别；自己移动不会影响其他元素。

包含块；正常情况下离此块最近的父辈块
      ；（本身）开启定位离他最近的开启定位的父辈元素
      如果都没开启，则相对于根元素定位

相对定位；刚开启不变动，类似于坐标运算，起始位置为“0”；层次变高
绝对定位；。。。脱离文档流，相对于包含块定位（父辈左上角）
固定定位；类似于绝对定位，但参考于浏览器视口（上下滚动，但它相对窗口不动）

元素的层级

z-index:值

相当于z轴，值越大层级越高