美文网首页
绝对定位相关注意点

绝对定位相关注意点

作者: i_木木木木木 | 来源:发表于2017-08-19 18:16 被阅读24次

    绝对定位注意点:

    绝对定位的元素是脱离标准流的, 不会占用标准流中的位置

    由于绝对定位的元素是脱离标准流的, 所以绝对定位的元素不区分块级元素/行内元素/行内块级元素

    如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点

    相对于body定位会随着页面的滚动而滚动

    一个绝对定位的元素会忽略祖先元素的padding


    绝对定位参考点:

    默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点

    如果一个绝对定位的元素有祖先元素, 并且祖先元素中有一个是定位流中的元素, 那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点

    如果一个绝对定位的元素有祖先元素, 并且祖先元素中有多个是定位流中的元素, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点


    绝对定位水平居中

    1.注意当一个盒子绝对定位之后不能使用margin: 0 auto;让盒子自身居中

    2.如果想让过一个绝对定位的盒子自身居中, 可以使用left: 50%; margin-left:-元素宽度一半px;

    相关文章

      网友评论

          本文标题:绝对定位相关注意点

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