美文网首页
css 居中 子绝父相

css 居中 子绝父相

作者: 方_圆 | 来源:发表于2022-01-20 16:44 被阅读0次

1.首先定义好父亲  儿子,,

2.设置好父亲的  高度 宽度,并且设置为相对位置, position: relative;

3.设置好儿子的宽度并且设置为相对位,并且设置为绝对位置   position: absolute;

子绝父相  居中    

····先让子盒子往右移动父元素的一半: left:50%;

····再让子盒子往左移动自己的一半;  transform: translateX(-50%) (表示沿着X轴负方向(往左)始终移动自己宽度的一半,子盒子宽度变化不需要改变代码;

 如果absloute 上下文中 不存在relative,相对于当前视窗做偏移 根节点  绝对位置*/

如果父亲是相对位置 ,儿子的话绝对位置相对于父亲进行偏移

4.大功告成    

相关文章

网友评论

      本文标题:css 居中 子绝父相

      本文链接:https://www.haomeiwen.com/subject/cuwjhrtx.html