美文网首页
position的四种定位方式

position的四种定位方式

作者: 小睿同学 | 来源:发表于2020-04-10 13:24 被阅读0次
    position的四种定位方式:static、fixed、relative、absolute

    1.position:static
    默认值,没有定位,元素出现在正常的流中;
    2.position:fixed
    固定定位 是相对于浏览器窗口来进行定位;
    3.position:relative
    相对定位 相对于其本身正常位置来进行定位,它原本所占的空间仍保留;
    4.position:absolute
    绝对定位 相对于定位方式不是static的第一个父元素进行定位(往上寻找参照元素,一直到根元素为止,即body),此时元素原先在正常文档流中所占的空间会关闭,就像元素原来不存在一样,绝对定位后会生成一个块级框,而不管它原先在正常流中是何种类型。

    注意:
    1.除static外,通过设置 top/right/bottom/left 来设置元素位置,static定位下是靠margin来移动位置
    2.当元素设置position:absolute后,再想用 margin:0px auto; 来使元素水平居中是无效的

    就这样,End~

    相关文章

      网友评论

          本文标题:position的四种定位方式

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