定位 position 根据属性值不同有三种类型的定位效果，其中绝对定位和固定定位的元素会脱离标准流。
三种定位在页面中有各自的使用场景，其中的使用技巧
压盖效果
所有的定位类型都可以实现压盖效果。
由于绝对定位的元素脱标，不占标准流位置，压盖效果更彻底
实际工作中，常见的是绝对定位制作的压盖
居中
定位的元素，如果想在参考元素中居中显示，有自己的居中方法：
第一步：在居中的方向使用一个偏移量属性，例如 left，设置属性值为 50%。导致图片的左顶点移动（不是元素的中心点）
到参考元素的中心位置。
百分比形式的属性值，百分百参考的是参考元素的 border 以内的宽度
left: 50%;
第二步：给绝对定位的子盒子设置一个同方向的 margin，例如 margin-left，属性值为负的自身宽度的一半
margin‐left: ‐50px;
注意：不论子盒子的宽度是否比参考元素更宽，都能使用以上方法进行居中设置
扩展应用：
①解决标准流中，宽的子盒子在窄的父盒子中的居中，可以设置大的子盒子相对定位，利用相对定位居中的方法进行居中。
②浮动的元素居中，在不改变原始浮动状态情况下，可以利用相对定位居中方法
若有收获，就点个赞吧
0 人点赞
