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 等属性都可以创建层叠上下文
*本文为鲲游北冥的原创文章,著作权归本人和饥人谷所有,转载务必注明来源