The position property specifies that an element is positioned.
Positioned elements do not participate in the standard HTML document flow.
Instead they specify their position relative to a container element.
Valid position values include fixed, absolute, sticky, and others.
This example has two positioned <div> elements.
The container is relative. The red, inner element is absolute. .
<style>
.relative-div {
position: relative;
max-width: 400px;
height: 200px;
border: 1px solid #ddd;
background: aliceblue;
}
.absolute-div {
position: absolute;
top: 60px;
left: 40px;
height: 60px;
width: 60px;
background-color: red;
}
</style>
<div class="relative-div">
<div class="absolute-div"></div>
</div>
The position property indicates what positioning method the element will follow.
Valid values include: static, relative, fixed, absolute, and sticky.
A positioned element uses the top, right, bottom, and left properties to align itself inside its container.
The default position value for elements is static.
Static elements are positioned according to the normal page flow.
A static position is not affected by top, right, bottom, and left properties.
An element with a static position. This is the default.
<div style="position: static;
border: 3px solid #6266f1;
padding: 15px;">
Position: static
</div>
Any element with position: relative is positioned relative to its normal position.
The top, right, bottom, and left properties move the element from its original position.
Elements with position: relative are often used as containers for position: absolute elements.
An element with relative position.
It has an adjusted left position.
<style>
.position-relative {
position: relative;
max-width: 250px;
left: 50px;
border: 3px solid #6266f1;
padding: 15px;
}
</style>
<div class="position-relative">
Position: relative
</div>
An element with position: fixed is positioned relative to the viewport.
These elements stay fixed regardless of the page scrolling status.
The top, right, bottom, and left properties are used to accurately place the element.
This <div> element displays at a bottom right fixed position.
Click 'try it live' to see this in action.
<style>
.position-fixed {
position: fixed;
bottom: 0;
right: 0;
width: 200px;
border: 3px solid teal;
padding: 15px;
}
</style>
<div class="position-fixed">
Position: fixed
</div>
An element with position: absolute is positioned relative to the nearest positioned parent.
The top, right, bottom, and left properties align the element relative to its nearest positioned container.
An absolute positioned element inside a relative parent container.
<style>
div.relative {
position: relative;
max-width: 400px;
height: 200px;
border: 3px solid #6266f1;
padding: 15px;
}
div.absolute {
position: absolute;
bottom: 10px;
right: 40px;
width: 200px;
height: 100px;
border: 3px solid #c6d2fe;
padding: 15px;
}
</style>
<div class="relative">
Position: relative
<div class="absolute">Position: absolute</div>
</div>
An element with position: sticky is positioned based on the page's scroll position.
A sticky element toggles between relative and fixed depending on scroll position.
The element is positioned relative, until a given offset position is met in the viewport.
Once the offset is met, the element sticks in place like a fixed positioned element.
This <div> element will be displayed in sticky position at top.
<style>
div.sticky {
position: sticky;
top: 0;
padding: 5px;
background-color: #ff7461;
border: 2px solid #F45D48;
color: white;
}
</style>
<div class="sticky">I am sticky!</div>
<div style="padding-bottom: 400px">
<p>
The sticky element sticks to the top
of the page (top: 0), when reaching
its scroll position.
</p>
<p>Scroll to see stickyness.</p>
</div>
Positioned elements can overlap other elements.
Use the z-index property to specify the stack order of an element.
Higher z-index values are in front, while lower value elements are behind.
This image is absolutely positioned, so it does not follow the normal page flow.
With a negative z-index it then displays behind the transparent overlay element.
<style>
.overlay-img {
position: absolute;
z-index: -1;
}
.overlay-text {
background: rgba(255,255,255,0.7);
padding: 20px;
font-size: 18px;
width: 300px;
}
</style>
<img src="/img/css/sunflowers.jpg"
class="overlay-img" />
<div class="overlay-text">
The image has a lower z-index and is
placed behind this overlay
</div>
For details on z-index, see our CSS z-index Property Reference.
Any element can be positioned perfectly in the center of a container.
The element must be positioned 50% from its top and left original position.
Using the transform property, anything can be placed in perfect center.
This square element is positioned horizontally and vertically in the center of the container.
<style>
.center-box {
position: relative;
background: #dfe7ff;
height: 200px;
max-width: 300px;
}
.center-item {
position: absolute;
height: 25px;
width: 25px;
background-color: navy;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<div class="center-box">
<div class="center-item">
</div>
</div>
These are CSS properties that are used for positioning elements.
| Property | Description |
|---|---|
| bottom | Sets the bottom margin edge for a positioned box |
| clip | Clips an absolutely positioned element |
| left | Sets the left margin edge for a positioned box |
| position | Specifies the type of positioning for an element |
| right | Sets the right margin edge for a positioned box |
| top | Sets the top margin edge for a positioned box |
| z-index | Sets the stack order of an element |
