什么是position?
position全称是Positioned Layout Module,是提供与元素定位和层叠相关功能,它是核心模块。
position有五种定位模式:
一,static又称为静态定位/常规定位/自然定位。
它的作用是使元素定位于常规/自然流中。(按照自然的布局模式:行内元素水平方向从左向右排列,块级元素垂直方向向下排列。)
特点:
1.设置后,会忽略top,left,right,bottom或z-index的声明。
2.两个相邻的元素如果都设置了外边距,那么最终外边距=两者外边距中最大的。
3.具有固定宽高的元素,如果把左右外边距设置auto,则左右外边距会自动扩大占满剩余宽度。效果是这个块会水平居中。
二,relative称为相对定位。作用是使元素成为containing-block,即可定位的祖先元素。
特点:
1,可以使用left,top,right,bottom,z-index进行相对定位。
2,相对定位元素不会离开常规流。意思是即使偏移了它本来的位置不会消失。
3,任何元素都可以设置为relative,它的绝对定位的后代可以对它进行绝对定位。
4,可以使浮动元素发生偏移,并控制它们的堆叠顺序。(把方向属性改为负数并设置z-index实现堆叠)
三,absolute绝对定位
作用使元素脱离常规流。
特点:
1,脱离常规流。意思是设置后,不再留原来的位置。
2,设置百分比是根据最近定位祖先元素来做。
3,四个方向(left,right...)设置为0,它将对齐到最近定位祖先元素的各边。
4,四个方向设置为auto,就会打回原形。
5,如果没有最近定位祖先元素,会为<body>为参照。
6,z-index可以控制堆叠顺序。
四,fixed固定定位。
特点:
fixed跟absolute一模一样,就是多了个视口固定的特性,就是随着滚动条滚动,能一直能看到这个元素。
五,sticky称为磁贴定位/粘性定位/吸附定位。作用:relative+fixed完美结合,制造出吸附效果。
特点:
1,如果产生偏移,原位置还是会在常规流中。
2,如果它最近祖先元素有滚动,那么它的偏移标尺就是最近的祖先元素。
3,如果最近祖先元素没有滚动,那么它的偏移标尺是视口。
4,上下左右的偏移规则。