The position property
The position property defines how elements
are positioned. This property is most often
used together with the properties
top,
right,
bottom,
left,
which set offsets
from the top, right, bottom, and left respectively.
Syntax
selector {
position: absolute | relative | fixed | static | sticky;
}
Values for position
| Value | Description |
|---|---|
absolute |
Absolute positioning. The element is removed from the normal document flow and positioned relative to the nearest positioned ancestor (if any) or relative to the browser window. |
relative |
Relative positioning. The element is offset relative to its normal position in the document flow, but the space it occupied remains reserved. |
fixed |
Fixed positioning. The element is removed from the normal document flow and positioned relative to the browser window. Stays in place when scrolling the page. |
static |
Static positioning. This value means no positioning is applied and the element behaves normally. |
sticky |
Sticky positioning.
The element behaves like relative until it reaches a specified
position during scrolling, after which it sticks in place
(like fixed).
|
Default value: static.
Example . Absolute positioning
Let's position an element in the top left corner of the screen with small offsets:
<div class="elem"></div>
<div class="main">
some long text
</div>
.elem {
position: absolute;
top: 40px;
left: 50px;
width: 100px;
height: 100px;
background-color: #98fb98;
}
.main {
width: 400px;
text-align: justify;
margin: 20px auto;
}
:
Example . Absolute positioning
Now let's position an element in the top right corner of the screen with small offsets:
<div class="elem"></div>
<div class="main">
some long text
</div>
.elem {
position: absolute;
top: 40px;
right: 50px;
width: 100px;
height: 100px;
background-color: #98fb98;
}
.main {
width: 400px;
text-align: justify;
margin: 20px auto;
}
:
Example . Fixed positioning
With fixed positioning, the element will stay in place when scrolling:
<div class="elem"></div>
<div class="main">
some long text
</div>
.elem {
position: fixed;
top: 40px;
left: 50px;
width: 100px;
height: 100px;
background-color: #98fb98;
}
.main {
width: 400px;
text-align: justify;
margin: 20px auto;
}
:
Example . Relative positioning
With relative positioning, the element is offset relative to its normal position, but other elements behave as if the element had not been offset:
<div class="container">
<div class="elem elem1"></div>
<div class="elem elem2"></div>
<div class="elem elem3"></div>
</div>
.container {
display: flex;
justify-content: flex-row;
}
.elem {
margin: 0 3px;
width: 100px;
height: 100px;
background-color: #add8e6;
}
.elem2 {
position: relative;
top: 20px;
left: 30px;
background-color: #e6addf;
}
:
Example . Nesting
If a parent has the position property
with value relative,
then absolutely positioned elements
will be positioned relative to
the parent:
<div class="container">
<div class="elem"></div>
</div>
.container {
position: relative;
border: 1px solid red;
width: 500px;
height: 300px;
}
.elem {
position: absolute;
top: 0px;
right: 0px;
width: 100px;
height: 100px;
background-color: #add8e6;
}
:
Example . Nesting
If a parent has the position property
with value absolute,
then absolutely positioned elements
will be positioned relative to
the parent:
<div class="container">
<div class="elem"></div>
</div>
.container {
position: absolute;
top: 30px;
left: 30px;
border: 1px solid red;
width: 500px;
height: 300px;
}
.elem {
position: absolute;
top: 0px;
right: 0px;
width: 100px;
height: 100px;
background-color: #add8e6;
}
:
Example . Sticky positioning
If an element has the position property
with value sticky, then the element behaves
like relative until it reaches a specified
position during scrolling, after which it sticks in place.
Let's make a sticky header:
<h1>Main Site Header</h1>
<div class="header">header header header</div>
<div class="main">
some long text
</div>
h1 {
text-align: center;
}
.header {
position: sticky;
top: 0;
padding: 20px;
background: #f0f0f0;
text-align: center;
font-weight: bold;
}
.main {
width: 400px;
margin: 20px auto;
border: 1px solid #ccc;
padding: 20px;
text-align: justify;
}
:
Example . No position
If an element is given absolute positioning without specifying a position, the element will remain where it was without positioning, but other elements will stop noticing it:
<div class="container">
<div class="elem elem1"></div>
<div class="elem elem2"></div>
<div class="elem elem3"></div>
</div>
.container {
position: relative;
border: 1px solid red;
width: 500px;
height: 300px;
}
.elem {
display: inline-block;
}
.elem2 {
position: absolute;
width: 50px;
height: 50px;
background-color: #e6addf;
}
.elem1, .elem3 {
width: 100px;
height: 100px;
background-color: #add8e6;
}
:
Example . One axis
With absolute positioning, you can specify a position
only along one axis.
For example, if we set the top property,
vertically the element will move to the desired
position, while horizontally it will remain
where it was:
<div class="container">
<div class="elem elem1"></div>
<div class="elem elem2"></div>
<div class="elem elem3"></div>
</div>
.container {
position: relative;
border: 1px solid red;
width: 500px;
height: 300px;
}
.elem {
display: inline-block;
}
.elem2 {
position: absolute;
top: 20px;
width: 50px;
height: 50px;
background-color: #e6addf;
}
.elem1, .elem3 {
width: 100px;
height: 100px;
background-color: #add8e6;
}
:
Example . All positions
With absolute positioning, you can specify positions on all sides without setting width and height. In this case, the element will be positioned in the center of the parent block:
<div class="container">
<div class="elem"></div>
</div>
.container {
position: relative;
border: 1px solid red;
width: 500px;
height: 300px;
}
.elem {
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
background-color: #add8e6;
}
:
See also
-
the
z-indexproperty,
which controls element stacking
