position

CSS position属性用于指定一个元素在文档中的定位方式。top，right，bottom和left属性则决定了该元素的最终位置。

语法

position:static | relative | absolute | fixed | sticky  

• 静态元素：属性为static的元素。流水式排列下来，定位赋值无效

• 相对定位元素：属性为relative的元素。给 top right 等定位赋值，确定位置

• 绝对定位元素：属性为absolute的元素。 可以直接用鼠标拖动窗口，确定位置，像按坐标位置浮在页面上

• 固定定位元素：属性为fixed的元素。 固定位置，网页移动时，位置不动

• 粘性定位元素：属性为sticky的元素。继承属性

取值

• static：该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。

• relative：该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。

• absolute：元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。

• fixed：元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。

• sticky：元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block(最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom,和 left的值进行偏移。偏移值不会影响任何其他元素的位置。

该值总是创建一个新的层叠上下文（stacking context）。注意，一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow 是 hidden, scroll, auto,或 overlay时），即便这个祖先不是真的滚动祖先。这个阻止了所有“sticky”行为

定位类型

定位元素：属性为relative,absolute,fixed或sticky的一个元素。

• 相对定位元素：属性为relative的元素。

• 绝对定位元素：属性为absolute的元素。

• 固定定位元素：属性为fixed的元素。

• 粘性定位元素：属性为sticky的元素。

大多数情况下，height和width被设定为auto的绝对定位元素，按其内容大小调整尺寸。但是，被绝对定位的元素可以通过指定top和bottom，保留height未指定（即auto），来填充可用的垂直空间。它们同样可以通过指定left和right并将width指定为auto来填充可用的水平空间。

除了刚刚描述的情况（绝对定位元素填充可用空间）：

• 如果top和bottom都被指定（严格来说，这里指定的值不能为auto），top优先。

• 如果指定了left和right，当direction设置为ltr（水平书写的中文、英语）时left优先，当direction设置为rtl（阿拉伯语、希伯来语、波斯语由右向左书写）时right优先。