简介
CSS的 position 属性设置元素的定位方式，为将要定位的元素定义定位规则。该属性在将动画特效脚本化时尤其有用。
| 初始值 | static |
|---|---|
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| 适用媒体 | visual |
| 计算值 | as specified |
| Animation type | discrete |
| 正规顺序 | the unique non-ambiguous order defined by the formal grammar |
| Creates stacking context | yes |
定位元素（positioned element）是计算后位置属性为 relative、absolute 、 fixed 或 sticky 的元素。
相对定位元素（relatively positioned element）是计算后位置属性为 relative 的元素。
绝对定位元素（absolutely positioned element）是计算后位置属性为 absolute 或 fixed 的元素。
粘性定位元素（stickily positioned element）是计算后位置属性为 sticky 的元素。
top、right、bottom 和 left 属性指定了被定位元素的位置。
语法
/* 关键字值 */ position: static; position: relative; position: absolute; position: fixed; position: sticky; /* 全局值 */ position: inherit;position：initial; position: unset;
取值
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属性非none时，容器由视口改为该祖先。
sticky- 元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为
table 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky 对 table 元素的效果与 position: relative 相同。
形式语法
static | relative | absolute | sticky | fixed
示例
相对定位
相对定位的元素仍然处于文档流中，而绝对定位的元素则脱离了文档流。绝对定位元素相对于他最近的定位祖先元素（position值非static）。如果没有这样的祖先元素，则相对于初始容器定位。
下面的例子中，不存在已定位的祖先元素。因而，第三个元素相对于直系祖先（iframe 的 <body> 元素）绝对定位。
HTML 内容
<div class="box" id="one">1</div> <div class="box" id="two">2</div> <div class="box" id="three">3</div> <div class="box" id="four">4</div>
CSS 内容
.box {
display: inline-block;
background: red;
width: 100px;
height: 100px;
float: left;
margin: 20px;
color: white;
}
#two {
position: relative;
top: 20px;
left: 20px;
}
注意未应用定位的其它元素是按照 "Two" 在正常位置的情况下进行布局的。
绝对定位
相对定位的元素并未脱离文档流，而绝对定位的元素则脱离了文档流。在布置文档流中其它元素时，绝对定位元素不占据空间。绝对定位元素相对于最近的非 static 祖先元素定位。当这样的祖先元素不存在时，则相对于根级容器定位。
下面的示例中，"Three" 元素不存在应用了定位的祖先元素，因此该元素相对于紧邻的祖先（iframe 中的 <body> 元素）绝对定位。
HTML 内容
<div class="box" id="one">One</div> <div class="box" id="two">Two</div> <div class="box" id="three">Three</div> <div class="box" id="four">Four</div>
CSS 内容
.box {
display: inline-block;
background: red;
width: 100px;
height: 100px;
float: left;
margin: 20px;
color: white;
}
#three {
position: absolute;
top: 20px;
left: 20px;
}
固定定位
固定定位于绝对定位相似，但元素的包含块为 viewport 视口。该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。在下面的示例中，"One" 元素定位在离页面顶部 80px，离页面左侧 20px 的位置。
HTML 内容
<div class="outer">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
</p>
<div class="box" id="one">One</div>
</div>
CSS 内容
.box {
background: red;
width: 100px;
height: 100px;
margin: 20px;
color: white;
}
#one {
position: fixed;
top: 80px;
left: 10px;
}
.outer {
width: 500px;
height: 300px;
overflow: scroll;
padding-left: 150px;
}
当浏览页面顶部时，定位元素处于左上角。在滚动后，它相对于 viewport 视口仍处于同一位置。
粘性定位
粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。例如：
#one { position: sticky; top: 10px; }
在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。
粘性定位常用于定位字母列表的头部元素。标示 B 部分开始的头部元素在滚动 A 部分时，始终处于 A 的下方。而在开始滚动 B 部分时，B 的头部会固定在屏幕顶部，直到所有 B 的项均完成滚动后，才被 C 的头部替代。
须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
HTML 内容
<div>
<dl>
<dt>A</dt>
<dd>Andrew W.K.</dd>
<dd>Apparat</dd>
<dd>Arcade Fire</dd>
<dd>At The Drive-In</dd>
<dd>Aziz Ansari</dd>
</dl>
<dl>
<dt>C</dt>
<dd>Chromeo</dd>
<dd>Common</dd>
<dd>Converge</dd>
<dd>Crystal Castles</dd>
<dd>Cursive</dd>
</dl>
<dl>
<dt>E</dt>
<dd>Explosions In The Sky</dd>
</dl>
<dl>
<dt>T</dt>
<dd>Ted Leo & The Pharmacists</dd>
<dd>T-Pain</dd>
<dd>Thrice</dd>
<dd>TV On The Radio</dd>
<dd>Two Gallants</dd>
</dl>
</div>
CSS 内容
* {
box-sizing: border-box;
}
dl {
margin: 0;
padding: 24px 0 0 0;
}
dt {
background: #B8C1C8;
border-bottom: 1px solid #989EA4;
border-top: 1px solid #717D85;
color: #FFF;
font: bold 18px/21px Helvetica, Arial, sans-serif;
margin: 0;
padding: 2px 0 0 12px;
position: -webkit-sticky;
position: sticky;
top: -1px;
}
dd {
font: bold 20px/45px Helvetica, Arial, sans-serif;
margin: 0;
padding: 0 0 0 12px;
white-space: nowrap;
}
dd + dd {
border-top: 1px solid #CCC
}
注解
对于相对定位元素，top 和 bottom 属性指定它相对于正常位置的垂直偏移，left 和 right 属性指定水平偏移。
对于绝对定位元素，top、right、bottom 和 left 属性指定元素相对于其包含块的偏移，即此时位置为与包含块的相对位置。元素的边距（margin）定位在这些偏移之中。
在大多数时候，绝对定位元素的 height 和 width 属性的值为 auto，它们会自动计算以适合元素的内容。但是非替换（non-replaced）绝对定位元素可以占据 top 和 bottom 的值（除 auto 外）所共同指定的可用空间，而不必设置 height（也就是设其为 auto）。left、right 与 width 也类似。
绝对定位元素的定位值发生冲突时的解决方法:
- 如果同时指定
top和bottom（非auto），优先采用top。 - 如果同时指定
left和right，若direction为ltr（英语、汉语等），则优先采用left；若direction为rtl（阿拉伯语、希伯来语等），则优先采用right。
规范
| 规范 | 状态 | 注释 |
|---|---|---|
| CSS Level 2 (Revision 1) position |
Recommendation | |
| CSS Positioned Layout Module Level 3 position |
Working Draft | 添加 sticky 属性值 |
浏览器兼容性
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | 1.0 | 1.0 (1.0) [1] | 4.0 [3] | 4.0 | 1.0 (85) |
fixedvalue |
1.0 | 1.0 (1.0) | 7.0 | 4.0 | 1.0 (85) |
stickyvalue |
? | 32 (32.0)bug 916315 [2] | ? | ? | 6.1 -webkit- |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | ? | 1.0 (1.0) [1] | ? | ? | iOS 6.1 -webkit- |
[1] 从 Firefox 30 起，Gecko 允许 <tr>, <thead>, and <tfoot> 元素使用 position: relative; 样式以作为绝对定位元素的容器。因此在表格内的 position:absolute 元素同样可相对于这些元素定位。在其它浏览器与旧版本 Firefox 中，对表格行或一组行设置 position: relative 是无效的。Firefox 通过在 JS 控制台输出对添加相对定位的表格行或行组元素的如下警告信息，来帮助开发者转移到新的样式行为上，并检测可能存在的渲染问题：
Relative positioning of table rows and row groups is now supported. This site may need to be updated because it may depend on this feature having no effect.
[2 ] 粘性定位仅在 Firefox 26 到 Firefox 31 中生效，且需要 about:config 选项中 layout.css.sticky.enabled 设置为 true. 在 Firefox 27 到 31 版本中，这是浏览器处于 Nightly 和 Aurora 版本下时的默认值。
[3] IE 中处于 quirks mode 时，定位不生效。