The position property specifies that an element is positioned.
Positioned elements do not participate in the standard page flow.
Options are: static, relative, absolute, fixed, or sticky.
Two nested elements. The inner element has an absolute position
and the outer element a relative position.
The top and right coordinates of the inner element are relative
to the sides of the outer element.
<style>
.relative {
position: relative;
max-width: 400px;
height: 200px;
background-color: lightblue;
}
.absolute {
position: absolute;
top: 80px;
right: 10px;
width: 200px;
height: 100px;
background-color: steelblue;
}
</style>
<div class="relative">
<div class="absolute"></div>
</div>
A position is relative to a container, such as the document body, or a parent element.
Exact pixel positions are specified with top, right, bottom, and left properties.
position: static | absolute | fixed | relative |
sticky | initial | inherit;
| Value | Description |
|---|---|
static |
Default. The element renders in the order as they appear in the document flow |
relative |
The element is positioned relative to its normal position |
absolute |
The element is positioned relative to a positioned (not static) parent element |
fixed |
The element is positioned relative to the browser window |
sticky |
The element is positioned based on the scrolling position of a parent element |
initial |
Sets the value to its default value. |
inherit |
Inherits the value from its parent element. |
This example has an element that is positioned based on the parent's scroll position. This can be useful when creating sticky menu bars on top of a page.
<style>
.sticky {
background-color: steelblue;
color: white;
padding: 15px;
top: 0;
position: sticky;
}
</style>
<div style="position: relative">
<div class="sticky">I am sticky!</div>
<div style="padding-bottom:800px">
<p>
In this example, the sticky element
sticks to the top of the page (top: 0),
when you reach its scroll position.
</p>
<p>Scroll back up to remove the stickyness.</p>
<p>
Some text to enable scrolling.. Lorem
ipsum dolor sit amet, illum definitiones
no quo, maluisset concludaturque et eum,
altera fabulas ut quo. Atqui causae
gloriatur ius te, id agam omnis evertitur
eum. Affert laboramus repudiandae nec et.
Inciderint efficiantur his ad. Eum no
molestiae voluptatibus.
</p>
<p>
Some text to enable scrolling.. Lorem
ipsum dolor sit amet, illum definitiones
no quo, maluisset concludaturque et eum,
altera fabulas ut quo. Atqui causae
gloriatur ius te, id agam omnis evertitur
eum. Affert laboramus repudiandae nec et.
Inciderint efficiantur his ad. Eum no
molestiae voluptatibus.
</p>
</div>
</div>
The position property can be used to perfectly center an element inside its container.
The element stays in the center even when the browser resizes.
<style>
.parent {
border: solid 1px steelblue;
height: 300px;
position: relative;
}
.child {
background: steelblue;
height: 80px;
width: 100px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
</style>
<div class="parent">
<div class="child"></div>
</div>
This table shows when position support started for each browser.
 Chrome
|
1.0 | Dec 2008 |
 Firefox
|
1.0 | Nov 2004 |
 IE/Edge
|
7.0 | Oct 2006 |
 Opera
|
4.0 | Jun 2000 |
 Safari
|
1.0 | Jun 2003 |
