SOURCE

<div class="root">
    <div class="father">
        <div class="child">
            你好
        </div>
    </div>
</div>

.root {
    position: relative;
    width: 200px;
    /* debug */
    border: 1px solid red;
    box-sizing: border-box;
}

.father {
    /* debug */
    border: 1px solid black;
    box-sizing: border-box;
}

.child {
    /* 
      绝对定位的非替换元素如果 left/right 或者 top/bottom 
      对立方位的属性值同时存在，
      那么默认 width: auto 的实际宽度会相对于
      最近的具有定位特性（position不是static)的祖先元素（root)计算。
      表现为 root 元素的宽度会影响到 child 元素的宽度，
      这称之为格式化宽度。
      只要 left/right 或者 top/bottom 不是同时存在，则  width: auto 的
      实际宽度表现为 fix-content，将内容完全包裹。
    */
    position: absolute;
    left: 20px;
    right: 20px;
    /*垂直方向的对立方位也会影响宽度的表现*/
    /* top: 20px;
    bottom: 20px; */
    /* debug */
    border: 1px solid green;
    box-sizing: border-box;
}