position设置为absolute/fixed时元素的特性
当position设置为absolute/fixed时元素有如下特性。
-
元素脱离标准流，不再具有原定元素的特性（如block、inline等），其默认宽高由内容决定，但其宽高可以任意设置（这点类似于行内块级元素）。
-
元素不再给父元素汇报宽高。即该元素不再撑起父元素（和浮动一样），因此设置子元素定位后父元素可能出现宽高消失的情况。
-
其子元素仍按照标准流的方式排布。
-
其后续元素直接顶上来占据其原有位置（和浮动的脱标有些不同），如下图。
-
多个绝对定位元素可能会发生层叠（和浮动的脱标有些不同）。
- 对于绝对定位元素来说，其参照对象的宽度 = 绝对定位元素的 left + right + margin-left + margin-right+ 绝对定位元素的实际占用宽度，其参照对象的高度= 绝对定位元素的 top+ bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度。因此，可以设置子元素 position:absolute 和 top:0; right:0; bottom:0; left:0; 以及margin:auto 来实现水平垂直居中（子元素的top、right、bottom、left原本是auto)。以垂直居中为例，这里设置了绝对定位的子元素的top和bottom指定为0时，由于默认的上下margin也等于0，子元素不满足上述公式，应处于初始状态。
父子元素水平上中心重合技巧
如果是背景图片，则该技巧实现的效果见可以用background-position属性，为元素的background-position设置为center。这里详解的是定位的写法+transform的写法。
//css
<style>
.content{
overflow: hidden;
}
.content-img{
/* 写法1 */
position: relative;
left: -1087px; //使用定位的缺点是需要设置具体的偏移值
margin-left: 50%; //相对父级包含快的宽度
/* 写法2（更推荐） */
transform: translateX(-50%); //相对自身
margin-left: 50%; //相对父级BFC
}
</style>
//html
<div class="content">
<img src="./asset/images/bc.png" alt="" class="content-img">
</div>
