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

  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,不管它的父亲、爷爷或者其他祖先有无定位属性。也就是说,拖动浏览器滚动条,其在视图中的位置不变。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • 当在这一个页面上实现布局和定位有几种不同的技术。使用哪种技术,很大程序上取决于内容和目标页面,因为有很多技术比别人...
    lulu_c阅读 1,099评论 0 5
  • 原文地址:详解绝对定位和相对定位 上一篇博文中对元素的居中方式进行了总结,其中很多方法中都用到了相对定位和绝对定位...
    薛普定朗谔克阅读 3,949评论 0 19
  • CSS的position总是属性很容易让人弄混~ 为了仔细区别它们,所以今天总结一下CSS的position属性~...
    fehysunny阅读 2,956评论 0 7
  • 语法# UPDATE table_nameSET column1 = value1, column2=value2...
    Flannery阅读 1,162评论 0 0