position的用法

*星号为便于本人个人理解的理解方式,如理解有误请指出

position: absolute

使元素脱离原来的文档流,相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。
会生成一个块级框。
*相当于将元素放置到原来页面层的上层图层,对下层不会产生干扰。
top / bottom / left / right 属性使元素相对于默认位置进行移动。(默认 top: 0; left:0,元素位于父包含块的左上角)

position: relative

使元素相对于原来的位置移动,但文档流中保留元素初始所占的空间。
*相当于在原页面层用透明色替代了元素,并元素置于上层图层。
top / bottom / left / right 属性使元素相对于原来位置进行相对移动。(默认 top: 0; left:0,元素不移动)

position: absolute 与 position: relative 的结合使用

前辈元素设置属性 position: relative,其后辈元素设置属性 position: absolute,可以使后辈属性相对于前辈属性的位置进行定位布局。

position: fixed

生成绝对的定位,相对于浏览器窗口进行定位。页面滚动,元素的位置相对于始终不变。
*会生成一个块级框。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,868评论 1 92
  • 一、语法: position:static | relative | absolute | fixed 取值: s...
    陈宏阅读 751评论 0 0
  • CSS position 属性 这个属性定义建立元素布局所用的定位机制。 任何元素都可以定位,不过绝对(absol...
    取名字咋这么难阅读 696评论 2 8
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,958评论 1 45
  • -一- 安如醉站在烈焰庄外,轻轻用手抚摸过那对浅笑环。姐姐,我这便进去为你报仇。 一朵梨花静静飘落,滑过浅笑环刃就...
    珞一心阅读 444评论 0 0