前端笔记-定位（补充）

叠放次序（z-index）

当多个元素同时设置定位时，定位元素之间有可能会发生重叠。

在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0.

例：z-index: 2; font-weight: 700;

注意：

1.z-index的默认属性值为0，取值越大，定位元素在层叠元素中越居上。

2.如果取值相同，则根据书写顺序，后来者居上。

3.后面数字一定不能加单位。

4.只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都没有此属性，亦不可指定此属性。

四种定位总结

定位模式	是否脱标占有位置	是否可以使用边偏移	移动位置基准
静态static	不脱标，正常模式	不可以	正常模式
相对定位relative	脱标，占有位置	可以	相对自身位置移动（自恋型）
绝对定位absolute	完全脱标，不占有位置	可以	相对于定位父级移动位置（拼爹型）
固定定位fixed	完全脱标，不占有位置	可以	相对于浏览器移动位置（认死理型）

定位使用注意

定位元素会脱标并且独立新开文档流层级，高度依赖定位会导致浏览器压力大，并且在后期维护中因为定位元素并不能跟随文档流进行流动，所以维护成本高。

实际开发中，能用文档流+盒子模型处理的布局，轻易不要使用浮动，能用浮动处理的布局，不要使用定位。只有在最关键的时刻才使用定位进行布局调整。