Home 〉 CSS Tutorials 〉 CSS Position Property Explained: static, relative, absolute, fixed, sticky

CSS Position Property Explained: static, relative, absolute, fixed, sticky !

CSS Position Property Explained: static, relative, absolute, fixed, sticky !

Not sure how to move elements where you want them? The `position` property allows you to control exactly where an element appears using values like `static`, `relative`, `absolute`, `fixed`, and `sticky`. Each type affects how the element is placed in the layout. This is a must-know for modals, toolbars, and floating elements.

Introduction

The 'position' property in CSS is used to control how an element is placed on a web page. It tells the browser how the element should behave in the layout and how it relates to other elements.

There are five main values:

  • 'static' (default)
  • 'relative'
  • 'absolute'
  • 'fixed'
  • 'sticky'

Let's explore each one step by step with examples.

1. 'position: static' (Default)

This is the default position. Elements are placed in the normal document flow.

Explanation: The element appears where it naturally fits, without any special positioning.

2. 'position: relative'

The element stays in the normal flow, but you can move it using 'top', 'left', 'right', and 'bottom'.

Example 📄

<div style="position: relative; top: 20px; left: 30px;">
Moved 20px down and 30px right
</div>

Explanation: It moved from its original position but still takes up the same space.

3. 'position: absolute'

The element is removed from normal flow and positioned relative to the nearest positioned ancestor.

Example 📄

<div style="position: relative;">
<div style="position: absolute; top: 10px; left: 10px;">
Absolutely Positioned Box
</div>
</div>

Explanation: The inner box is placed 10px from the top-left corner of the outer box (because the outer box is 'relative').

4. 'position: fixed'

The element is fixed relative to the browser window. It doesn't move when you scroll.

Example 📄

<div style="position: fixed; bottom: 10px; right: 10px;">
Fixed Footer Button
</div>

Explanation: Great for sticky headers, sidebars, or "back to top" buttons.

5. 'position: sticky'

The element acts like 'relative' until it reaches a scroll point, then becomes 'fixed'.

Example:

Example 📄

<div style="position: sticky; top: 0; background: yellow;">
Sticky Header
</div>

Explanation: The element sticks to the top when you scroll past it. Great for headers or table labels.

Bonus: Z-Index (Layer Control)

When using 'position', you can control which element appears on top using 'z-index'.

Example 📄

z-index: 10;

Higher values appear above lower ones.

Demo Layout Example (Combined)

Code : 1 📝

<!DOCTYPE html>
<html>
<head>
<style>

.parent {
position: relative;
width: 300px;
height: 200px;
background-color: #f0f0f0;
}
.absolute-box {
position: absolute;
top: 10px;
left: 10px;
background: red;
color: white;
padding: 10px;
}

</style>
</head>
<body>

<div style="position: static;">This is static positioned</div>
<div class="parent">
Parent Box
<div class="absolute-box">I'm absolute</div>
</div>

</body>
</html>

output 📌

This is static positioned
Parent Box
I'm absolute
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Explanation: The red box is absolutely positioned inside the gray box.

Summary Table

Position Type In Document Flow? Moves with Scroll? Offset Works?
static Yes Yes No
relative Yes Yes Yes
absolute No Yes Yes
fixed No No Yes
sticky Yes Partial Yes

Conclusion

The CSS 'position' property is one of the most important tools in web design. It controls how elements are laid out on the screen and helps you build flexible, responsive designs.

Start with simple layouts and play with each type. With practice, positioning will become second nature.

Suggested Posts:

Related Topics:

Frequently Asked Questions (FAQs)

What's the default position in CSS?

'static' is the default position.

What is the difference between relative and absolute positioning?

'relative' moves from its normal place. 'absolute' removes the element from the flow and positions it based on the nearest positioned parent.

Does fixed positioning work on mobile?

Yes, but behavior may differ slightly on some mobile browsers.

When should I use sticky?

Use it for headers or table rows that should stay visible while scrolling.

Previous Post Next Post