css3postion怎么用

CSS3中的postion属性可以控制元素在文档流中的位置，内置了多个取值，包括static，relative，absolute，fixed和sticky，下面将会逐一介绍这些取值的用法。

/* static */
div.static {
  position: static;
}

/* relative */
div.relative {
  position: relative;
  left: 20px;
  top: 20px;
}

/* absolute */
div.absolute {
  position: absolute;
  left: 50px;
  top: 50px;
}

/* fixed */
div.fixed {
  position: fixed;
  right: 0;
  bottom: 0;
}

/* sticky */
div.sticky {
  position: sticky;
  top: 0;
}

static取值是元素的默认值，表示元素在正常的文档流中，left、top、right和bottom属性不会对元素位置产生影响。

relative取值表示相对于元素原本在文档流中的位置进行定位，通过left、top、right和bottom属性可以控制元素相对于原本位置的偏移量。

absolute取值表示相对于最近的非static定位祖先元素进行定位，如果不存在这样的祖先元素，则相对于文档的body元素进行定位。

fixed取值表示相对于浏览器视口进行定位，即元素在滚动时不会改变位置。

sticky取值是相对于在滚动期间元素位置的起始位置进行定位的，当元素滚动到固定位置时就变为fixed定位，不再随滚动而变化，一直保持在固定位置。