美文网首页
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