美文网首页饥人谷技术博客
绝对定位、相对定位与固定定位

绝对定位、相对定位与固定定位

作者: 李凯强 | 来源:发表于2015-11-20 18:12 被阅读2204次
    1. 绝对定位
      如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的(如果父元素没有定位属性,则看它的爷爷符不符合条件)一个具有定位属性(relative/absolute/fixed)的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素。
      将元素从文档流中拖出来:元素完全脱离其原来的文档流,元素以前的位置可以被占用。
    2. 相对定位
      如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。
    3. 固定定位
      元素被设置position:fixed后,与绝对定位一样,该元素完全脱离文档流,然后设置left,right,top,bottom的值来确定元素的位置,与绝对定位不同的是,fixed相对的移动坐标是body,不管它的父亲、爷爷或者其他祖先有无定位属性。也就是说,拖动浏览器滚动条,其在视图中的位置不变。

    相关文章

      网友评论

        本文标题:绝对定位、相对定位与固定定位

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