The position
CSS property specifies how an element is positioned in a document. The top
, right
, bottom
, and left
properties determine the final location of positioned elements.
position
value is either relative
, absolute
, fixed
, or sticky
. (In other words, it's anything except static
.)position
value is relative
. The 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
. The top
, right
, bottom
, and left
properties specify offsets from the edges of the element's containing block. (The containing block is the ancestor to which the element is relatively positioned.) If the element has margins, they are added to the offset.position
value is sticky
. It's treated as relatively positioned until its containing block crosses a specified threshold, at which point it is treated as fixed.Most of the time, absolutely positioned elements that have height
and width
set to 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.).The position
property is specified as a single keyword chosen from the list of values below.
static
top
, right
, bottom
, left
, and z-index
properties have no effect. This is the default value.relative
top
, right
, bottom
, and 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
. This value creates a new stacking context when the value of z-index
is not auto
. The effect of relative
on table-*-group
, table-row
, table-column
, table-cell
, and table-caption
elements is undefined.absolute
top
, right
, bottom
, and left
. This value creates a new stacking context when the value of z-index
is not auto
. Absolutely positioned boxes can have margins, and they do not collapse with any other margins.fixed
top
, right
, bottom
, and left
. This value always creates a new stacking context. When an ancestor has the transform
or perspective
property set to something other than none
, that ancestor is used as the container instead of the viewport (see CSS Transforms Spec). In printed documents, the element is placed in the same position on every page.sticky
top
, right
, bottom
, and left
. The offset does not affect the position of any other elements. This value always creates a new stacking context. Note that sticky, by specification, will not work inside element with overflow: hidden
or auto
. (ref: Github issue on W3C CSSWG)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, the initial container is used. In the example below, box "Two" has no positioned ancestor, so it is positioned relative to the the <body>
of the document.
<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: absolute; top: 20px; left: 20px; background: blue; }
Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport. 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 oftop
, right
, bottom
, or 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; }
Specification | Status | Comment |
---|---|---|
CSS Level 2 (Revision 1) The definition of 'position' in that specification. | Recommendation | |
CSS Positioned Layout Module Level 3 The definition of 'position' in that specification. | Working Draft | Adds sticky property value. |
Initial value | static |
---|---|
Applies to | all elements |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Creates stacking context | yes |
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 1 | 12 | 11 | 42 | 4 | 1 |
fixed |
1 | 12 | 13 | 7 | 4 | 1 |
sticky |
56 | 16 |
32 26 — 484 |
No | 43 | 6.1 -webkit- |
Table elements as absolute positioning containers | ? | ? | 305 | ? | ? | ? |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
---|---|---|---|---|---|---|---|
Basic support | Yes | Yes | Yes | 4 | Yes | Yes | ? |
fixed |
Yes | Yes | ? | ? | Yes | ? | ? |
sticky |
56 | 56 | 16 | ? | 43 | ? | ? |
Table elements as absolute positioning containers | ? | ? | ? | 306 | ? | ? | ? |
1. Before Firefox 57, absolute positioning did not work correctly when applied to elements inside tables that have border-collapse
applied to them (bug 1379306).
2. In Internet Explorer, fixed positioning doesn't work if the document is in quirks mode.
3. Before Firefox 44, position: fixed
didn't create a stacking context in most cases. Firefox and the specification have been modified to mimic Chrome and Safari's long-time behavior.
4. From version 26 until version 48 (exclusive): this feature is behind the layout.css.sticky.enabled
preference (needs to be set to true
). To change preferences in Firefox, visit about:config.
5. Firefox later helps developers transition to the new behavior and detect any rendering issues it may cause on their sites by printing the following warning to the JavaScript console: "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."
6. Firefox helps developers transition to the new behavior and detect any rendering issues it may cause on their sites by printing the following warning to the JavaScript console: "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."
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/position