position
CSS
property sets how an element is positioned in a document. The
top
,
right
,
bottom
，和
left
properties determine the final location of positioned elements.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
position
property is specified as a single keyword chosen from the list of values below.
static
top
,
right
,
bottom
,
left
，和
z-index
properties have
no effect
. This is the default value.
relative
top
,
right
,
bottom
，和
left
. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were
static
.
z-index
不是
auto
. Its effect on
table-*-group
,
table-row
,
table-column
,
table-cell
，和
table-caption
elements is undefined.
absolute
top
,
right
,
bottom
，和
left
.
z-index
不是
auto
. The margins of absolutely positioned boxes do not
collapse
with other margins.
fixed
transform
,
perspective
，或
filter
property set to something other than
none
(see the
CSS Transforms Spec
), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with
perspective
and
filter
contributing to containing block formation.) Its final position is determined by the values of
top
,
right
,
bottom
，和
left
.
sticky
top
,
right
,
bottom
，和
left
. The offset does not affect the position of any other elements.
overflow
is
hidden
,
scroll
,
auto
，或
overlay
), even if that ancestor isn't the nearest actually scrolling ancestor. This effectively inhibits any "sticky" behavior (see the
GitHub issue on W3C CSSWG
).
position
value is either
relative
,
absolute
,
fixed
，或
sticky
. (In other words, it's anything except
static
.)
position
value is
relative
。
top
and
bottom
properties specify the vertical offset from its normal position; the
left
and
right
properties specify the horizontal offset.
position
value is
absolute
or
fixed
。
top
,
right
,
bottom
，和
left
properties specify offsets from the edges of the element's
包含块
. (The containing block is the ancestor relative to which the element is positioned.) If the element has margins, they are added to the offset. The element establishes a new
block formatting context
(BFC) for its contents.
position
value is
sticky
. It's treated as relatively positioned until its
包含块
crosses a specified threshold (such as setting
top
to value other than auto) within its flow root (or the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its
包含块
.
Most of the time, absolutely positioned elements that have
height
and
width
设为
auto
are sized so as to fit their contents. However, non-
replaced
, absolutely positioned elements can be made to fill the available vertical space by specifying both
top
and
bottom
and leaving
height
unspecified (that is,
auto
). They can likewise be made to fill the available horizontal space by specifying both
left
and
right
and leaving
width
as
auto
.
Except for the case just described (of absolutely positioned elements filling the available space):
top
and
bottom
are specified (technically, not
auto
),
top
wins.
left
and
right
are specified,
left
wins when
direction
is
ltr
(English, horizontal Japanese, etc.) and
right
wins when
direction
is
rtl
(Persian, Arabic, Hebrew, etc.).
Ensure that elements positioned with an
absolute
or
fixed
value do not obscure other content when the page is zoomed to increase text size.
Scrolling elements containing
fixed
or
sticky
content can cause performance and accessibility issues. As a user scrolls, the browser must repaint the sticky or fixed content in a new location. Depending on the content needing to be repainted, the browser performance, and the device's processing speed, the browser may not be able to manage repaints at 60
fps
, causing accessibility concerns for people with sensitivities and jank for everyone. One solution is to add
will-change: transform
to the positioned elements to render the element in its own layer, improving repaint speed and therefore improving performance and accessibility.
| 初始值 |
static
|
|---|---|
| 适用于 | 所有元素 |
| 继承 | no |
| 计算值 | 如指定 |
| 动画类型 | discrete |
| Creates stacking context | yes |
static | relative | absolute | sticky | fixed
Relatively positioned elements are offset a given amount from their normal position within the document, but without the offset affecting other elements. In the example below, note how the other elements are placed as if "Two" were taking up the space of its normal location.
<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>
.box {
display: inline-block;
width: 100px;
height: 100px;
background: red;
color: white;
}
#two {
position: relative;
top: 20px;
left: 20px;
background: blue;
}
Elements that are relatively positioned remain in the normal flow of the document. In contrast, an element that is absolutely positioned is taken out of the flow; thus, other elements are positioned as if it did not exist. The absolutely positioned element is positioned relative to its
nearest positioned ancestor
(i.e., the nearest ancestor that is not
static
). If a positioned ancestor doesn't exist, it is positioned relative to the ICB (initial containing block — see also the
W3C definition
), which is the containing block of the document's root element.
<h1>Absolute positioning</h1> <p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> <p class="positioned">By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p> <p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://yari-demos.prod.mdn.mozit.cloud/files/13360/long.jpg"></p>
body {
width: 500px;
margin: 0 auto;
}
p {
background: aqua;
border: 3px solid blue;
padding: 10px;
margin: 10px;
}
span {
background: red;
border: 1px solid black;
}
.positioned {
position: absolute;
background: yellow;
top: 30px;
left: 30px;
}
Fixed positioning is similar to absolute positioning, with the exception that the element's
包含块
is the initial containing block established by the
viewport
, unless any ancestor has
transform
,
perspective
，或
filter
property set to something other than
none
(见
CSS Transforms Spec
), which then causes that ancestor to take the place of the elements
包含块
. This can be used to create a "floating" element that stays in the same position regardless of scrolling. In the example below, box "One" is fixed at 80 pixels from the top of the page and 10 pixels from the left. Even after scrolling, it remains in the same place relative to the viewport.
<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>
.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;
}
Sticky positioning can be thought of as a hybrid of relative and fixed positioning. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed until it reaches the boundary of its parent. For instance...
#one { position: sticky; top: 10px; }
...would position the element with id one relatively until the viewport were scrolled such that the element would be less than 10 pixels from the top. Beyond that threshold, the element would be fixed to 10 pixels from the top.
A common use for sticky positioning is for the headings in an alphabetized list. The "B" heading will appear just below the items that begin with "A" until they are scrolled offscreen. Rather than sliding offscreen with the rest of the content, the "B" heading will then remain fixed to the top of the viewport until all the "B" items have scrolled offscreen, at which point it will be covered up by the "C" heading, and so on.
You must specify a threshold with at least one of
top
,
right
,
bottom
，或
left
for sticky positioning to behave as expected. Otherwise, it will be indistinguishable from relative positioning.
<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 & The Pharmacists</dd>
<dd>T-Pain</dd>
<dd>Thrice</dd>
<dd>TV On The Radio</dd>
<dd>Two Gallants</dd>
</div>
</dl>
* {
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;
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Level 2 (Revision 1)
The definition of 'position' in that specification. |
推荐 | |
|
CSS Positioned Layout Module Level 3
The definition of 'position' in that specification. |
工作草案 |
添加
sticky
property value.
|
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
position
|
Chrome 完整支持 1 | Edge 完整支持 12 |
Firefox
完整支持
1
注意事项
|
IE 完整支持 4 | Opera 完整支持 4 | Safari 完整支持 1 | WebView Android 完整支持 ≤37 | Chrome Android 完整支持 18 |
Firefox Android
完整支持
4
注意事项
|
Opera Android 完整支持 14 | Safari iOS 完整支持 1 | Samsung Internet Android 完整支持 1.0 |
| Absolutely-positioned flex children | Chrome 完整支持 52 | Edge 完整支持 12 | Firefox 完整支持 52 | IE 完整支持 10 | Opera 完整支持 39 | Safari 完整支持 11 | WebView Android 完整支持 52 | Chrome Android 完整支持 52 | Firefox Android 完整支持 52 | Opera Android 完整支持 41 | Safari iOS 完整支持 11 | Samsung Internet Android 完整支持 6.0 |
fixed
|
Chrome 完整支持 1 | Edge 完整支持 12 |
Firefox
完整支持
1
注意事项
|
IE
完整支持
7
注意事项
|
Opera 完整支持 4 | Safari 完整支持 1 | WebView Android 完整支持 ≤37 | Chrome Android 完整支持 18 |
Firefox Android
完整支持
4
注意事项
|
Opera Android 完整支持 14 | Safari iOS 完整支持 1 | Samsung Internet Android 完整支持 1.0 |
Table elements as
sticky
positioning containers
|
Chrome 完整支持 56 | Edge 完整支持 16 | Firefox 完整支持 59 | IE 不支持 No | Opera 完整支持 43 | Safari 完整支持 8 | WebView Android 完整支持 56 | Chrome Android 完整支持 56 | Firefox Android 完整支持 59 | Opera Android 完整支持 43 | Safari iOS 完整支持 8 | Samsung Internet Android 完整支持 6.0 |
sticky
|
Chrome 完整支持 56 | Edge 完整支持 16 |
Firefox
完整支持
32
|
IE 不支持 No | Opera 完整支持 43 |
Safari
完整支持
6.1
Prefixed
|
WebView Android 完整支持 56 | Chrome Android 完整支持 56 |
Firefox Android
完整支持
32
|
Opera Android 完整支持 43 |
Safari iOS
完整支持
6.1
Prefixed
|
Samsung Internet Android 完整支持 6.0 |
完整支持
不支持
见实现注意事项。
用户必须明确启用此特征。
要求使用供应商前缀或不同名称。