作者:办事繁华_491 | 来源:互联网 | 2020-09-17 10:11
1、relative:相对定位,相对定位是相对于元素默认的位置的定位;2、absolute:绝对定位,设置absolute属性的元素在标准流中不占位置;3、fixed:固定定位,设置为fixed的元素,可定位与相对于浏览器窗口的指定坐标。
position 的常见四个属性值: relative,absolute,fixed,static。一般都要配合"left"、"top"、"right" 以及 "bottom" 属性使用。
下面我们来详细说明一下:
static:默认位置
在一般情况下,我们不需要特别的去声明它,但有时候遇到继承的情况,我们不愿意见到元素所继承的属性影响本身,从而可以用Position:static取消继承,即还原元素定位的默认值。设置为 static 的元素,它始终会处于页面流给予的位置(static 元素会忽略任何 top、 bottom、left 或 right 声明)。不常用。
relative:相对定位
相对定位是相对于元素默认的位置的定位,它偏移的 top,right,bottom,left 的值都以它原来的位置为基准偏移,而不管其他元素会怎么 样。注意 relative 移动后的元素在原来的位置仍占据空间。
absolute:绝对定位
设置为 absolute 的元素,如果它的 父容器设置了 position 属性,并且 position 的属性值为 absolute 或者 relative,那么就会依据父容器进行偏移。如果其父容器没有设置 position 属性,那么偏移是以 body 为依据。注意设置 absolute 属性的元素在标准流中不占位置。
fixed:固定定位
位置被设置为 fixed 的元素,可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否,元素都会留在那个位置。它始终是以 body 为依据的。 注意设置 fixed 属性的元素在标准流中不占位置。
推荐教程:css快速入门
以上就是position的几个属性的作用分别是什么的详细内容,更多请关注 第一PHP社区 其它相关文章!