CSS定位-position

CSS position属性

static作用：使元素定位于自然流中（块、行垂直排列、行内水平从左到右）。

特点：1、忽略top,bottom,left,right或者z-index声明（偏移量）

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

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

relative 相对定位

作用：使元素成为containing-block（可定位的祖先元素）

特点：1、可以使用top,right,bottom,left,z-index进行相对定位（相对于自己原来在常规流中的位置进行偏移）

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

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

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

absolute 绝对定位

作用：使元素脱离常规流

特定：1、脱离常规流

           2、设置尺寸要注意：一般使用数值px，也可使用百分比，注意百分比比的是谁？——最近定位祖先元素(relative)

           3、lrtb(left right...)如果设置为0 它将对齐到最近定位祖先元素的各边，都设置为0且margin: auto auto;可以水平垂直居中。

           4、lrtb如果设置为auto 它将被打回原形

           5、如果没有最近定位祖先元素 会以body为标准

           6、z-index可以控制堆叠顺序 1 999999

fixed 固定定位

作用：与绝对定位相同

特点：1、与绝对定位的区别在于相对于谁做绝对定位，fixed相对于视口做定位

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

           3、继承absolute的特点

sticky 磁贴定位

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

特点：1、如果产生偏移，原位置还是会在常规流中

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

           3、如果最近的祖先元素没有滚动，那么它的偏移标尺是窗口

           4、上下左右的偏移规则

查看浏览器兼容性的网站：www.caniuse.com

将鼠标指针形状变为小手形状：  cursor：pointer；