CSS Positioning Explained: static, relative, absolute, and fixed
The CSS position property allows you to take elements out of the normal document flow and place them exactly where you want them. It's a fundamental concept for creating everything from small badges to full-page overlays. This guide breaks down the four most common values.
position: static (The Default)
How it works: Every element is static by default. This means it simply sits in the normal "flow" of the page. The properties top, right, bottom, and left have no effect on a static element.
<div>I am static. I just follow the element before me.</div>position: relative
How it works: This is the first step to unlocking positioning. Setting an element to position: relative; doesn't change its position initially. However, it now allows you to use top, right, bottom, and left to move it *relative to where it would have been*. The original space it occupied is preserved.
Most importantly, it creates a "positioning context" for child elements. This is crucial for absolute positioning.
Example of `relative` positioning:
<style>
.box-relative {
position: relative;
/* Move it 20px down from its original spot */
top: 20px;
left: 30px;
background-color: #4f46e5;
color: white;
padding: 10px;
}
</style>
<div>An element before.</div>
<div class="box-relative">I am shifted from my starting point.</div>
<div>An element after. Notice the gap where the relative box used to be.</div>Try it Yourself: Paste this into the HTML Viewer and see how the blue box moves, but leaves an empty space behind.
position: absolute
How it works: This is a powerful one. An element with position: absolute; is completely removed from the normal document flow. It no longer takes up any space. It is then positioned relative to its *nearest positioned ancestor* (i.e., the closest parent that has a position value other than `static`, like `relative` or `absolute`). If no positioned ancestor exists, it is positioned relative to the initial <body> tag.
Example of `absolute` positioning (the most common use case):
<style>
.card {
position: relative; /* This is the positioned ancestor! */
width: 250px;
height: 150px;
border: 1px solid #ccc;
}
.badge {
position: absolute; /* This will be positioned relative to .card */
top: 10px;
right: 10px;
background-color: red;
color: white;
padding: 5px;
}
</style>
<div class="card">
I am the parent container.
<div class="badge">New!</div>
</div>Try it Yourself: In the live editor, remove position: relative; from the .card style. Notice how the "New!" badge flies up to the top-right corner of the entire preview pane because it no longer has a positioned ancestor.
position: fixed
How it works: An element with position: fixed; is also removed from the document flow. However, it is always positioned relative to the *viewport* (the browser window itself). It does not move when the user scrolls the page.
This is perfect for creating "sticky" headers, cookie banners, or "Back to Top" buttons.
Example of a `fixed` bottom banner:
<style>
.cookie-banner {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #333;
color: white;
text-align: center;
padding: 1rem;
}
</style>
<div class="cookie-banner">
This banner will stay at the bottom of the screen, even when you scroll.
</div>
<p style="height: 1000px;">Add lots of content to create a scrollbar...</p>Choosing the Right Position
Understanding these four values is key to creating complex, layered designs. Remember the fundamental rule: to contain an absolute element, give its parent position: relative. With that pattern, you can build almost anything.