在CSS中，定位(position)属性用于规定元素的定位类型，定义建立元素布局所用的定位机制。下面给大家介绍一下position属性，有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
position 属性规定元素的定位类型。
说明
position属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
默认值：static
继承性：no
语法：position:static|relative|absolute|fixed|sticky|inherit|initial;
属性值：值描述
absolute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static默认值。没有定位，元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
sticky粘性定位，该定位基于用户滚动的位置。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。
inherit规定应该从父元素继承 position 属性的值。
initial设置该属性为默认值
position 属性常用值(absolute、fixed、relative、sticky)的区别
1、relative(相对定位)
元素相对自身的原位置偏移某个距离，可能会覆盖其他元素；占据空间，元素的初始位置占据的空间会被保留，表现为空白。
相对定位元素常常作为绝对定位元素的父元素。并且定位元素经常与z-index属性进行层次分级
2、absolute(绝对定位)
原来的元素空间被删除，新生成一个块级框，与页面内容相对静止，如果页面向下滑动，该块级框会跟随向上运动
不占空间，相对于最近的已定位的祖先元素，有已定位(指position不是static的元素)祖先元素, 以最近的祖先元素为参考标准。如果无已定位祖先元素, 以body元素为偏移参照基准。
所以，父元素一般设置为相对定位
3、fixed(固定定位)
原来的元素空间被删除，新生成一个块级框，固定在页面的一个位置，即使向下滑动页面，该块级框依旧位置不改变
不占空间，相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。一个固定定位元素不会保留它原本在页面应有的空隙。
4、sticky(粘性定位)
1)、static表示没有定位，或者说不算具有定位属性。
2)、如果元素 position 属性值为 static(或者未设 position 属性)，该元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。设置 top，right，bottom，left 这些偏移属性不会影响静态定位的正常显示(设置这些属性没有用)。
跟随页面一起滚动，当超过阈值以后，固定在页面边缘，相当于 absolute和fixed的混合
例如：#one { position: sticky; top: 10px; }
在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。
