position此属性的值有static,relative,absolute,fixed,sticky;
下面依次讲解每个值
static:此元素的定位根据正常的文档流来进行定位,且设置top,right,bottom.left和z-index属性不起作用;
relative:此元素的定位根据正常的文档流来进行定位,但是此元素的位置可以设置top,right,bottom.left等值来进行定位;
absolute:此元素会是元素脱离文档流;并且不会为页面布局中的元素创建空间。它相对于其最近的祖先(如果有的话)定位; 否则,它相对于整个窗口来放置。其最终位置是由的值确定的top
,right
,bottom
,和left,
此时将创建新的堆叠上下文。当z-index值不是auto时,绝对定位框的边距不会与其他边距一起折叠。
fixed:此元素会是元素脱离文档流;并且不会为页面布局中的元素创建空间,它相对于整个窗口来放置。其最终位置是由的值确定的top
,right
,bottom
,和left,并且始终在视窗的同一位置;
sticky:此元素的定位根据正常的文档流来进行定位,其他与fixed相似