定位 | position

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 属性无效。

形式语法

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-