CSS定位

定位总结

在使用定位时,如果出现盒子重叠的情况,可以使用 z-index 控制盒子的前后顺序。

一 、定位的叠放顺序注意事项

1. 数值是整数,默认是 auto ,数值越大,盒子越靠前;

2. 数值相同,按书写顺序显示,后书写的盒子显示在上方;

3. 数值后面没有单位;

4. 只有定位的盒子在可以使用 z-index 属性

二、绝对定位的盒子实现水平居中的步骤

1. left: 50%; 向右移动到父盒子宽度的一半;

2. margin-left: -宽度的一半; 利用负数向左移动子盒宽度的一半;

3. top: 50%; 向下移动到父盒子高度的一半;

4. margin-top: -高度的一半; 利用负数向上移动子盒高度的一半。

三、绝对定位之后,不仅会脱标,而且有层次 —— 没有相邻的盒子; 此时与边偏移属性联用,修改 margin 可以参照盒子的外边框位置继续调整盒 子的位置。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。