【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;
效果如下图:
文章图片
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区域):
文章图片
相对浏览器左上角偏移 如果body属性设置position:relative,会出现什么结果呢?
文章图片
相对于body偏移 所以,你肯定也就知道了,下面这种效果怎么实现了吧
文章图片
相对于其他父元素偏移
上述效果代码:
.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 )详解