CSS|CSS position属性

【CSS|CSS position属性】CSS中 postion 是一个常用的属性,position 有几个属性值:static、relative、absolute、fixed。每个属性都有一定的特点,掌握了这些特点才能正确使用 position 属性。
1.static 属性默认值,对象遵循正常文档流,top,bottom,left,right,z-index没有作用。
2.relative 相对位置布局,对象遵循正常文档流,占据正常文档流的位置,但是根据top,bottom,left,right参数相对于正常位置相对偏移,就像是你坐火车去上厕所,虽然你离开了你原先的座位,但是你的座位本身还是占据空间的。相对位置布局的元素之间的层叠关系通过z-index属性定义。
如果设置postion如下:

position: relative; left: 20px; top: 20px;

效果如下图:

CSS|CSS position属性
文章图片
relative位置布局
其中红色虚线是不设置position为relative时的位置,红色实现区域是按上面代码设置position属性值为relative,并且left和top属性都为20px的结果,从上述结果中我们可以看到,偏移是相对其正常文档流中的位置进行偏移的。
3.absolute absolute,意味着“绝对”,可absolute的用法却一点也不“绝对”,还是这个意思,理解的有偏差?不管怎样,absolute的规则是确定的:
具有absolute属性的块元素,会向上一层一层寻找position不是static的第一个父元素,直到父元素为止,如果存在这样的父元素,left,top,right,bottom所设置的偏移量就是其相对于找到的父元素的偏移量,如果没有,设置的偏移量以浏览器的左上角为基准。
如下代码中,拥有absolute属性的块元素,其父元素position属性值都是static,按照规则,其相对位置应该是相对于浏览器左上角。
html{ margin: 20px; border: solid 1px red; position: static; } body{ border: solid 1px blue; position: static; padding: 20px; } .parent{ margin: 10px 0px; width: 400px; height: 300px; background-color: pink; color: white; position: static; } .child{ width: 200px; height: 60px; background-color: #5bc0de; color: white; position: absolute; box-sizing: border-box; padding: 20px; left: 0px; top: 0px; box-shadow: 0px 8px 16px rgba(0,0,0,0.18); }parent divabsolute div

效果图(红色框代表html区域,蓝色框代表body区域):
CSS|CSS position属性
文章图片
相对浏览器左上角偏移 如果body属性设置position:relative,会出现什么结果呢?
CSS|CSS position属性
文章图片
相对于body偏移 所以,你肯定也就知道了,下面这种效果怎么实现了吧

CSS|CSS position属性
文章图片
相对于其他父元素偏移
上述效果代码:
.parent{ margin: 10px 0px; width: 400px; height: 300px; background-color: pink; color: white; position: relative; /*设置父元素的postion值为非static*/ } .child{ width: 200px; height: 60px; background-color: #5bc0de; color: white; position: absolute; box-sizing: border-box; padding: 20px; left: 400px; /*设置偏移距离*/ top: 0px; box-shadow: 0px 8px 16px rgba(0,0,0,0.18); }

4.fixed fixed很简单,脱离文档流,相对浏览器窗口定位,即使页面内容滚动,fixed区域位置不会跟着变动。z-index确定层叠关系。
参考博客:CSS中position属性( absolute | relative | static | fixed )详解

    推荐阅读