1 div分层

1、布局是屏幕平面上的，定位是垂直于屏幕的；

2、从下到上：定位元素：z-index < 0 --background--border--块级子元素--浮动元素--内联子元素--定位元素:z-index > 0；

3、背景background的范围是border外边沿围成的区域；

4、浮动元素里面的文字会被正常的文字覆盖，而对于正常的文字，后出现的后把先出现的覆盖；

2 position

1、默认值，待在文档流中；

1、相对定位，升起来，但不脱离文档流；

2、使用场景：用于做位移（很少用）；用于给absolute元素做爸爸；

3、配合index：元素z-index为默认值 auto 时，不创建新的层叠上下文，为 0 或其它数字时创建；

1、定位基准是相对于祖先元素中最近的一个定位元素（position值不是static）定位的；

2、使用场景：脱离原来的位置，另起一层，比如：对话框的关闭按钮、鼠标提示；

3、配合 z-index；

4、经验：某些浏览器上如果不写 top/left/bottom/right 会位置错乱，一般要写两个；善用 left：100% 或 bottom：100% ；善用居中：

 left:50%;
 transform:translatex(-50%) ；

1、定位基准是默认视口（viewport），但是：如果fixed所在的元素有一些特殊样式，如：transform时，则fixed不相对于视口定位；

2、使用场景：回到顶部按钮；

3、配合 z-index ；

4、写了fixed，一定要补top和left；

1、粘滞定位，一般不用，兼容性很差；

1、position的值为relative、absolute时，z-index的默认值为auto，此时不会创建层叠上下文，需要同时设置z-index的值不为auto，才能创建层叠上下文；position的值为 fixed 时，不需要设置z-index的值，默认创建层叠上下文；

2、默认的层叠上下文是HTML ；

3、z-index小于零的定位元素会位于该元素所处的div的background 后面，但是不会超过该元素所在的层叠上下文的后面；