CSS Position Property Explained (static, Relative, Absolute, Fixed, Sticky)

Do you want to move elements around the page? Or make a menu stick to the top? That’s where the CSS position property comes in!

CSS positioning is one of the most powerful layout tools in front-end development. Whether you are aligning buttons, building sticky headers, or designing complex UIs, understanding how position works is essential. In this beginner-friendly guide, you will learn the differences between static, relative, absolute, fixed, and sticky – with real examples and use cases.

In this post, you will learn:

How CSS positioning works
The difference between static, relative, absolute, fixed, and sticky
Real-world examples and tips for beginners

How CSS Positioning Works

CSS positioning allows you to control where elements appear on a web page by using properties like top, left, right, and bottom.

To use these properties, you first set the element’s position to one of the following values: static, relative, absolute, fixed, or sticky. Each one behaves differently, and we will cover them all step-by-step.

CSS Position Property Types

position: static (Default)

By default, every HTML element has position: static. This means elements flow naturally according to the HTML document structure.

Behavior

Element follows normal document flow.
top, left, right, and bottom properties do not apply.
Elements do not overlap unless the layout system (flex, grid) causes it.

Example

<style>
  .static-box {
    width: 100px;
    height: 100px;
    background-color: #f44336;
    position: static; /* Default, can be omitted */
    top: 50px; /* Ignored */
  }
</style>

<div class="static-box"></div>

<style>
  .static-box {
    width: 100px;
    height: 100px;
    background-color: #f44336;
    position: static; /* Default, can be omitted */
    top: 50px; /* Ignored */
  }
</style>

<div class="static-box"></div>

📝 In this example:

The red box is positioned naturally by the HTML flow.
The top: 50px has no effect because position: static ignores offset properties.

When to Use

Use static to reset an element’s position after it was changed.
Usually no need to explicitly set this value – it’s the default.

Tips & Common Mistakes

👉 Remember: offset properties (top, left, etc.) don’t work on static elements.
👉 Use position: static mainly to undo other positioning styles.

position: relative

position: relative allows an element to remain in the normal document flow, but gives you the ability to shift it visually using the top, right, bottom, or left properties.

Behavior

Element remains in the normal document flow.
Moves visually relative to its original position.
The space it originally occupies is preserved.
Can overlap other elements if moved enough.
Creates a positioning context for absolutely positioned child elements.

Example

<style>
  .relative-box {
    position: relative;
    top: 20px;
    left: 10px;
    background-color: #4caf50;
    width: 150px;
    height: 100px;
    color: white;
    padding: 10px;
  }
</style>

<div class="relative-box">I am relatively positioned</div>

<style>
  .relative-box {
    position: relative;
    top: 20px;
    left: 10px;
    background-color: #4caf50;
    width: 150px;
    height: 100px;
    color: white;
    padding: 10px;
  }
</style>

<div class="relative-box">I am relatively positioned</div>

📝 In this example:

The green box is shifted 20px down and 10px right visually.
Its original space remains in the layout.

When to Use

To make small positional adjustments without affecting layout.
To create a parent context for absolutely positioned children.
For smooth CSS animations or transitions involving movement.

position: absolute

position: absolute removes an element from the normal flow and positions it relative to the nearest positioned ancestor (relative, absolute, or fixed). If none exists, it uses the <html> element.

Behavior

Removed from document flow (does not take up space).
Positioned relative to the nearest ancestor with a positioning context.
Can overlap other elements freely.

Example

<style>
  .relative-container {
    position: relative;
    width: 300px;
    height: 200px;
    background-color: #2196f3;
    padding: 10px;
    color: white;
  }

  .absolute-box {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ff5722;
    padding: 10px;
  }
</style>

<div class="relative-container">
  Parent (relative)
  <div class="absolute-box">I am absolutely positioned</div>
</div>

<style>
  .relative-container {
    position: relative;
    width: 300px;
    height: 200px;
    background-color: #2196f3;
    padding: 10px;
    color: white;
  }

  .absolute-box {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ff5722;
    padding: 10px;
  }
</style>

<div class="relative-container">
  Parent (relative)
  <div class="absolute-box">I am absolutely positioned</div>
</div>

📝 In this example:

The orange box is positioned 10px from the top-right of its blue parent container.
It does not take up space and may overlap content.

When to Use

To precisely place elements like tooltips, dropdowns, modals, or overlays.

position: fixed

position: fixed positions the element relative to the browser viewport, and it stays fixed even when scrolling.

Behavior

Removed from document flow.
Always relative to viewport (window).
Stays in place during page scroll.
Can overlap content.

Example

<style>
  .fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: black;
    color: white;
    padding: 10px;
    text-align: center;
    z-index: 1000;
  }
</style>

<div class="fixed-header">Fixed Header</div>
<p>...add long content here...</p>

<style>
  .fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: black;
    color: white;
    padding: 10px;
    text-align: center;
    z-index: 1000;
  }
</style>

<div class="fixed-header">Fixed Header</div>
<p>...add long content here...</p>

📝 In this example:

The black header remains stuck to the top of the viewport while scrolling.

When to Use

For sticky headers or footers that stay visible during scrolling.
For floating buttons, chat icons, notifications, or cookie banners.

position: sticky

position: sticky toggles between relative and fixed based on scroll position within its container.

Behavior

Acts like relative until scroll hits a threshold.
Then behaves like fixed – sticks to the offset position.
Sticks only within its parent container’s bounds.

Example

<style>
  .container {
    height: 300px;
    overflow: auto;
    border: 1px solid #ccc;
  }

  .sticky-header {
    position: sticky;
    top: 0;
    background-color: #fff;
    padding: 10px;
    border-bottom: 2px solid #2196f3;
    z-index: 100;
  }

  .content {
    height: 600px;
    padding: 10px;
  }
</style>

<div class="container">
  <div class="sticky-header">I stick to the top within container</div>
  <div class="content">Lots of scrollable content here...</div>
</div>

<style>
  .container {
    height: 300px;
    overflow: auto;
    border: 1px solid #ccc;
  }

  .sticky-header {
    position: sticky;
    top: 0;
    background-color: #fff;
    padding: 10px;
    border-bottom: 2px solid #2196f3;
    z-index: 100;
  }

  .content {
    height: 600px;
    padding: 10px;
  }
</style>

<div class="container">
  <div class="sticky-header">I stick to the top within container</div>
  <div class="content">Lots of scrollable content here...</div>
</div>

📝 In this example:

The header sticks to the top of the .container as you scroll inside it, but not the whole page.

Important Notes

top (or left/right) offset is required for sticky to work.
Sticky elements do not stick if the parent has overflow: hidden or auto without height.
Older browsers like IE11 don’t support sticky.
Use z-index to keep sticky elements on top.

When to Use

To make nav bars, headers, or table headers stick on scroll within their container.

Summary Table

Position Value	Description	Affects Layout?	Scrolls with Page?
static	Default, natural document flow	✅ Yes	✅ Yes
relative	Offset from original position	✅ Yes	✅ Yes
absolute	Positioned relative to the nearest ancestor	❌ No	✅ Yes
fixed	Positioned relative to viewport	❌ No	❌ No (stays fixed in place)
sticky	Scrolls until it “sticks”	✅ Yes	✅ Yes (until it sticks)

Practice Task

Try this:

Create a <div> element and apply each of the five position values (static, relative, absolute, fixed, sticky).
Use top, left, right, and bottom offsets to move them.
Observe how each affects layout and scrolling behavior.
Share your favorite use case or any questions in the comments below!

If you found this guide helpful, consider sharing it with your freinds.