1.首先定义好父亲 儿子,,
![](https://img.haomeiwen.com/i19339767/db0eff72acc46e83.png)
2.设置好父亲的 高度 宽度,并且设置为相对位置, position: relative;
![](https://img.haomeiwen.com/i19339767/d3c62c7feacbef72.png)
3.设置好儿子的宽度并且设置为相对位,并且设置为绝对位置 position: absolute;
![](https://img.haomeiwen.com/i19339767/ecf2138146e4bf6e.png)
子绝父相 居中
····先让子盒子往右移动父元素的一半: left:50%;
····再让子盒子往左移动自己的一半; transform: translateX(-50%) (表示沿着X轴负方向(往左)始终移动自己宽度的一半,子盒子宽度变化不需要改变代码;
如果absloute 上下文中 不存在relative,相对于当前视窗做偏移 根节点 绝对位置*/
如果父亲是相对位置 ,儿子的话绝对位置相对于父亲进行偏移
4.大功告成
![](https://img.haomeiwen.com/i19339767/73f6b90d22c3705f.png)
网友评论