CSS 定位

CSS 的定位是垂直于屏幕的

background 的范围：border 外边沿围成的区域

一个div的分层

position 属性

• static 默认值，待着文档流里
• relative 相对定位，升起来，但不脱离文档流

1.用做位移（很少用）

2.给 absolute 元素做爸爸

• absolute 绝对定位，定位基准是祖先元素中最近的一个非 static 元素

1.脱离原来的位置，另起一层，比如对话框的关闭按钮

2.鼠标提示

• fixed 固定定位，定位基准是viewport （视口）手机上尽量不使用，坑很多

1.广告

2.回到顶部按钮

• stickly 粘滞定位，兼容性较差，一般不用

z-index 属性

控制元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

z-index 仅能在定位元素上奏效

/* 字符值 */
z-index: auto; /* 默认值 不会创建新层叠上下文 */

/* 整数值 */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1;/* 使用负值降低优先级 不能脱离层叠上下文 */

/* 全局值 */
z-index: inherit;
z-index: initial;
z-index: unset;

经验

• 如果写了 absolute 一般要补个 relative
• 如果写了 absoulute 或 fixed 一般要补个 top 和 left ，某些浏览器不写这两个会位置错乱
• 善用 left:100% ;善用 left:50% 加负 margin 或加 transform:translatex (-50%)

层叠上下文

每个层叠上下文就是个小世界（作用域）

这个小世界里的 z-index 与外界无关，同一个世界的才能比较

z-index / flex / opacity / transform 等属性都可以创建层叠上下文

*本文为鲲游北冥的原创文章，著作权归本人和饥人谷所有，转载务必注明来源