css 定位

一、position属性
1.position-static
静态定位、常规定位、自然定位

作用：使元素定位于常规、自然流中

（块、行垂直排列下去、行内水平从左到右）

特点：

忽略top bottom left right 或者 z-index 声明。

两个相邻的元素如果都设置了外边距，那么最终外边距等于两者外边距中最大的。

具有固定width和height值的元素，如果把左右外边距设置为auto,则左右外边距会自动扩大占满剩余宽度。造成的效果就是这个块水平居中

2.position-relative
相对定位

作用：

使元素成为可定位的祖先元素

特点：

可以使用 top right botton left z-index进行相对定位

相对定位的元素不会离开常规流

任何元素都可以设置relative，他的绝对定位的后代都可以相对于他进行绝对定位

可以使浮动元素发生偏移，并控制他们的堆叠顺序

3.position-absolute
绝对定位

作用：使元素脱离常规流

特点：

脱离常规流

设置尺寸要注意:百分比比的是最近定位祖先元素

如果没有最近的祖先元素，会默认为body为祖先元素

上下左右如果设置为0，它将对齐到最近定位祖先元素的各一边—衍生出一个居中秒计

上下左右如果设置为auto 它将被打回原形

z-index可以控制堆叠顺序

4.position-fixed
固定定位

固定定位相对于视觉窗口做定位。

固定定位元素不会随着视口滚动而滚动

5.position-sticky
磁贴定位 粘性定位 吸附定位

作用：relavtive与fixed的完美结合，制造出吸附效果

特点：

如果发生偏移，原位置还是会在常规流中

如果它的最近祖先元素有滚动 那么他的偏移标尺就是最近的祖先元素

如果最近的祖先元素没有滚动 那么他的偏移标尺是视口

上下左右的偏移规则