定位 | position

该position CSS属性指定的元素如何定位一个文件内。的top，right，bottom，和left属性确定定位元素的最终位置。

/* Keyword values */
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

/* Global values */
position: inherit;
position: initial;
position: unset;

初始值	静态的
适用于	所有元素
遗传	没有
媒体	视觉
计算值	作为指定
动画类型	离散的
规范的顺序	形式语法定义的独特的非模糊顺序
创建堆叠上下文	是

定位类型

定位元件是一个元件，其计算position值是relative，absolute，fixed，或sticky。（换句话说，除了static这个之外什么都没有。）

一个相对定位的元素是一个计算位置值是相对的元素。top bottom 属性指定垂直偏移距其正常位置;left right属性指定水平偏移量。

一个绝对定位的元素是一种元素，其计算位置值是absolute或fixed.的top，right，bottom，和left属性指定从所述元素的包含块的边缘偏移。（包含块是元素相对定位的祖先。）如果元素有边距，则将其添加到偏移量。

粘粘定位元件是一个元件，其计算的position值是sticky。它被视为相对定位，直到其包含的块超过指定的阈值，此时它被视为固定的。

在大多数情况下，具有绝对定位的元素height和width设置auto的大小，以适合他们的内容。可制成然而，非替换绝对定位元素通过指定两个以填充可用垂直空间top和bottom和离开height未指定（即，auto）。他们同样可以进行指定既填充可用水平空间left和right和离开width的auto。

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

如果同时top与bottom指定（技术上，而不是auto），top优先。

如果同时left并right指定了，left优先的时候direction是ltr（英语，日语水平等）和right胜当direction是rtl（波斯语，阿拉伯语，希伯来语等）。

语法

该position属性被指定为从下面的值列表中选择的单个关键字。

值

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

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

absolute不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距，且不会与其他边距合并。fixed不为元素预留空间，而是通过指定元素相对于屏幕视口的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed属性会创建新的层叠上下文。当元素祖先的?

transform? 属性非none时，容器由视口改为该祖先。sticky盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root和 containing block 定位。在所有情况下（即便被定位元素为?table 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照?B 未定位时的位置来确定。position: sticky对table元素的效果与position: relative相同。

形式语法

static | relative | absolute | sticky | fixed

实例

相对定位

相对定位的元素与其在文档中的正常位置相抵给定的数量，但不影响其他元素的偏移量。在下面的示例中，请注意其他元素是如何放置的，就好像“Two”占用了其正常位置的空间一样。

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;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}

绝对定位

相对定位的元素保持在文档的正常流程中。相反，绝对定位的元素被从流中取出; 因此，其他元素被定位好像它不存在。绝对定位的元素相对于其最近的定位祖先（即，最近的祖先不是static）。如果定位的祖先不存在，则使用初始容器。在下面的例子中，框“Two”没有定位祖先，所以它相对于<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;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: absolute;
  top: 20px;
  left: 20px;
  background: blue;
}

固定定位

固定的定位类似于绝对定位，除了元素的包含块是视口。这可以用来创建一个浮动元素，无论滚动，都保持在相同的位置。在下面的例子中，框“One”被固定在距页面顶部80个像素和距左侧10个像素处。即使在滚动之后，它仍然在相对于视口的相同位置。

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 {
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#one {
  position: fixed;
  top: 80px;
  left: 10px;
  background: blue;
}

.outer {
  width: 500px;
  height: 300px;
  overflow: scroll;
  padding-left: 150px;
}

粘性定位

粘滞的定位可以被认为是相对和固定定位的混合。一个粘性定位的元素被视为相对定位，直到它超过一个指定的阈值，此时它被视为固定的。例如...

#one { position: sticky; top: 10px; }

...将相对于id的元素定位一个，直到视口滚动，使得元素距离顶部小于10个像素。超过该阈值，元素将被固定为从顶部10个像素。

粘性定位的常见用法是按字母顺序排列的列表中的标题。“B”标题将出现在以“A”开头的项目下方，直到它们被滚动到屏幕外。“B”标题将保持固定在视口的顶部，直到所有的“B”项滚动到屏幕外为止，此时它将被“C”标题等等。你必须有至少一个指定的阈值top，right，bottom，或left为粘稠定位像预期的那样。否则，它将与相对定位无法区分。

HTML

<dl>
  <div>
    <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>
  </div>
  <div>
    <dt>C</dt>
    <dd>Chromeo</dd>
    <dd>Common</dd>
    <dd>Converge</dd>
    <dd>Crystal Castles</dd>
    <dd>Cursive</dd>
  </div>
  <div>
    <dt>E</dt>
    <dd>Explosions In The Sky</dd>
  </div>
  <div>
    <dt>T</dt>
    <dd>Ted Leo &amp; The Pharmacists</dd>
    <dd>T-Pain</dd>
    <dd>Thrice</dd>
    <dd>TV On The Radio</dd>
    <dd>Two Gallants</dd>
  </div>
</dl>

CSS

* {
  box-sizing: border-box;
}

dl > div {
  background: #FFF;
  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;
}

规范

Specification	Status	Comment
CSS Level 2 (Revision 1)The definition of 'position' in that specification.	Recommendation	?
CSS Positioned Layout Module Level 3The definition of 'position' in that specification.	Working Draft	Adds sticky property value.

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1	12	1.0 (1.0) 1	4.0 3	4.0	1.0 (85)
fixed value	1	12	1.0 (1.0) 4	7.0	4.0	1.0 (85)
sticky value	56	16 5	32 (32.0) 2	No support	42	6.1 -webkit-

Feature	Android Webview	Chrome for Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	1	1	(Yes)	1.0 (1.0) 1	?	(Yes)	7.0 -webkit-

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18