CSS中的position定位

position的属性

属性	名称	作用
static	自然模型	使元素定位于自然流中
relative	相对定位模型	可定位的祖先元素
absolute	绝对定位模型	使元素脱离常规流
fixed	固定定位模型	使元素脱离常规流
sticky	磁贴定位模型	relative与fixed的完美结合，制造出吸附效果

position 5个属性的特点

• static：
  1、忽略top、bottom、left、right、z-index的声明。
  2、两个相邻的元素如果都设置了外边距，那么它们之间的外边距等于两者之间最大的那个。
  3、具有固定width和height值的元素，如果把左右外边距设置为auto，则左右外边距会自动扩大占满剩余宽度。造成的效果就是这个块水平居中。

• relative：
  1、可以使用top、bottom、left、right、z-index进行相对定位，相对于普通流中的位置。
  2、相对定位的元素不会离开自然流。
  3、任何元素都可以设置为relative，它的绝对定位的后代都可以相对于它进行绝对定位。
  4、可以使用浮动元素发生偏移，并控制它们的堆叠顺序（浮动元素不能设置外边距等偏移量，但是加上相对定位就可以实现）。

• absolute
  1、脱离常规流。
  2、设置尺寸要注意，百分比比的是最近定位是static的祖先元素。
  3、 lrtb（left、right、top、bottom）如果为0，它将对齐到最近定位祖先元素的各边—衍生出一个居中妙计。
  4、lrtb如果被设置为auto，它将被打回原形。
  5、如果元素没有已定位（static不算）的祖先元素，那么它的位置是相对于最初的包含块，也是就是body元素。
  6、z-index可以控制绝对定位元素的层叠顺序。

• fixed
  1、fixed是相对于浏览器视窗定位的。
  2、固定定位的元素会一直固定在浏览器视窗的某个位置，会随着浏览器的滚动而滚动。比如小说网站上的一些小广告。
  3、继承absolute的特点。

• sticky
  1、如果产生偏移，原位置还是在常规流中。
  2、如果它的最近祖先有滚动，那么它的偏移标尺就是最近祖先元素。
  3、如果最近元素没有滚动，那么它的偏移标尺就是视窗。
  4、上下左右偏移规则 top、bottom、left、right。