css定位属性position的值的含义

CSS定位属性中的position值，是用来设置元素的定位方式的。在CSS中，position共有四个不同的值，分别是：static、relative、absolute以及fixed。下面是每个值的解释：

.static {
  position: static;
}

static是元素默认的定位方式，元素会按照页面的正常文档流进行排列，不会受到其他定位属性的影响。

.relative {
  position: relative;
  top: 10px;
  left: 20px;
}

relative可以让元素相对于原本的位置进行定位。通过指定top、bottom、left、right属性的值，可以让元素在其原有位置上进行移动。与元素在其原有位置上留有空间，其他元素不会随之移动。

.absolute {
  position: absolute;
  top: 50px;
  left: 50px;
}

absolute会让元素相对于其父元素进行定位。如果父元素没有设置position或者为static，则会相对于文档的body进行定位。与相对定位不同的是，元素在定位后不会在原有位置上留有空间，其他元素会随之移动。使用时需要注意父元素的定位。

.fixed {
  position: fixed;
  top: 0;
  left: 0;
}

fixed可以将元素固定在浏览器窗口的指定位置，不会因为页面滚动而移动。通常用于制作浮动导航栏或广告等功能。