Posted inCascading Style Sheet - CSS

CSS Layout – position Property

No Comments

The position property defines the positioning method for an element.

It supports five different values:

  • static
  • relative
  • fixed
  • absolute
  • sticky

  • Elements are positioned using the top, bottom, left, and right properties.
  • These properties only work when the position property is set.
  • The behavior of top, bottom, left, and right varies based on the position value.

position: static; (default)

This is the default position for all HTML elements.

  • The element follows the normal document flow.
  • It ignores properties like top, bottom, left, and right.
  • When to use?
  • Use static when you want elements to appear naturally in the document flow without modifying their position.
<!DOCTYPE html>
<html>
<head>
<style>
.box1 {
    position: static; /* Default value */
    top: 50px; /* Won't work */
    left: 50px; /* Won't work */
    border: 3 px solid black;
}
</style>
</head>
<body>

<h2>position: static;</h2>

<p>An HTML element with position: static; </p>

<div class="box1">
I am a relative box with position: static; I am always positioned according to the normal flow of the page. I am not positioned in any special method
</div>

</body>
</html>

position: relative

The element is positioned relative to its normal position.

  • The properties top, bottom, left, and right move it from its original position, but other elements are not affected or adjusted to fit into any space left.
  • When to use?
  • When you want to nudge an element slightly from its normal position.
  • When using absolute inside a relative parent (more on this below).
<!DOCTYPE html>
<html>
<head>
<style>
.box2 {
    position: relative;
    top: 20px; /* Moves 20px down from its original position */
    left: 30px; /* Moves 30px to the right */
    background-color: blue;
}

</style>
</head>
<body>

<h2>position: relative;</h2>

<p>An HTML element with position: relative; </p>

<div class="box2">
I am a relative box with position: relative; I am positioned relative to my normal position.
</div>
</body>
</html>

position: absolute;

  • The element is positioned relative to the nearest positioned ancestor (an ancestor with position: relative, absolute, or fixed).
  • If no ancestor is positioned, it positions relative to <body> (the whole page) and moves along with page scrolling.
  • How absolute position works
  • It is positioned relative to the nearest positioned ancestor.
  • If a parent element has position: relative;, absolute;, or fixed;, the absolute element will use that as its reference for positioning.
  • If there are no positioned ancestors, it is positioned relative to <body>.
  • The element moves with page scrolling because the body is the reference.
  • It is removed from the normal document flow.
  • The element does not affect the positions of other elements.
  • Other elements behave as if the absolutely positioned element does not exist.
  • It can overlap other elements.
  • Since it’s removed from the normal flow, it can be placed anywhere, even overlapping other elements.
  • When to use?
  • When you want an element inside a container but positioned freely.
  • When you want to overlay elements on top of others.
  • ✔ Best practice: Always use absolute inside a relative container to control its positioning.

Example 1: Positioned to a relative container

<!DOCTYPE html>
<html>
<head>
<style>
.container {
    position: relative;
    width: 400px;
    height: 300px;
    background-color: lightgray;
}

.box {
    position: absolute;
    top: 50px;
    left: 100px;
    background-color: coral;
    width: 150px;
    height: 100px;
}
</style>
</head>
<body>

<h2>position: absolute;</h2>

<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the html document)</p>

<div class="container"> I am a relative container with position: relative;
  <div class="box">I am an Absolute Box with position: absolute; I am positioned relative to my parent container </div>
</div>

</body>
</html>

Example 2: Without a Positioned Ancestor (Relative to <body>)

No parent has position: relative;, so .absolute-box positions itself relative to <body>.

top: 50px; left: 100px; means:

  • The box moves 50px from the top of the page.
  • The box moves 100px from the left of the page.

It moves along with page scrolling.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .absolute-box {
            position: absolute;
            top: 50px;
            left: 100px;
            width: 200px;
            height: 100px;
            background-color: lightcoral;
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <div class="absolute-box">I am an Absolute Box!</div>
</body>
</html>

Example 3: With a Positioned Ancestor (position: relative;)

.container has position: relative;, so it becomes the reference for .absolute-box.

.absolute-box now positions itself relative to .container, not <body>.

top: 50px; left: 100px; means:

  • The box moves 50px from the top of .container.
  • The box moves 100px from the left of .container.

It does not move with page scrolling because it’s inside .container.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .container {
            position: relative;
            width: 400px;
            height: 300px;
            background-color: lightblue;
            margin: 50px;
        }

        .absolute-box {
            position: absolute;
            top: 50px;
            left: 100px;
            width: 200px;
            height: 100px;
            background-color: lightcoral;
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="absolute-box">I am an Absolute Box!</div>
    </div>
</body>
</html>

Example 4: Overlapping Other Elements

  • .absolute-box overlaps .box2 because it is removed from the normal flow.
  • .box2 behaves as if .absolute-box does not exist, so it does not get pushed down.
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .box1 {
            width: 300px;
            height: 100px;
            background-color: lightgreen;
            margin-bottom: 10px;
        }

        .absolute-box {
            position: absolute;
            top: 50px;
            left: 100px;
            width: 200px;
            height: 100px;
            background-color: lightcoral;
            border: 2px solid red;
        }

        .box2 {
            width: 300px;
            height: 100px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="box1">I am Box 1 (Static Position)</div>
    <div class="absolute-box">I am an Absolute Box!</div>
    <div class="box2">I am Box 2 (Static Position)</div>
</body>
</html>

Practical Use Cases of position: absolute;

✅ Creating UI elements that float over content (e.g., modals, tooltips, dropdown menus).
✅ Positioning elements inside a container without affecting other elements (e.g., placing a logo in a fixed spot).
✅ Custom layouts where elements are positioned freely inside a section.

position: fixed;

The element is positioned relative to the viewport (browser window).

It does not move when scrolling.

It is removed from the normal document flow, meaning other elements are not affected.

When to use?

  • For sticky navigation bars (top: 0px;).
  • For floating chat buttons (bottom-right corner).
  • For popups or notifications that stay in place while scrolling.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
    position: fixed;
    bottom: 10px;
    right: 10px;
    background-color: yellow;
    padding: 10px;
}

</style>
</head>
<body>

<h2>position: fixed;</h2>

<p>An element with position: fixed; is positioned relative to the viewport. When the page is scrolled, it always stays in the same place :</p>

<div class="fixed">
I am an element with fixed position
</div>

</body>
</html>

position: sticky;

This element is like relative at first but becomes fixed after scrolling a certain distance.

When to use?

  • For sticky headers that stay visible at the top of the page while scrolling.
  • For section titles that remain visible until the next section.
<!DOCTYPE html>
<html>
<head>
<style>
.sticky {
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: darkorange;
  border: 2px solid darkgray;
}
</style>
</head>
<body>

<p>Scroll <b>and see</b> how sticky positioning works.</p>

<div class="sticky">I am sticky!</div>

<div style="padding-bottom:2000px">
  <p>When you scroll down, the above sticky element sticks to the top of the page (top: 0).</p>
  <p>To remove the sticky, scroll up .</p>
  <p>Sample text AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA. BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
    CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC.
    DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD.
    EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE
    FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF
    GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG
  </p>
  <p>Sample text AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA. BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
    CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC.
    DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD.
    EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE
    FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF
    GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG
  </p>
</div>

</body>
</html>

Real-World Usage Scenarios

🔹 When to use relative?

✅ Adjusting an element slightly from its original place.
✅ Creating a parent for absolute elements.

🔹 Example: Keeping a button slightly off-center.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .button {
    position: relative;
    left: 20px;
}

    </style>
    <title>Document</title>
</head>
<body>
    <button class="button">I am a relative Button</button>
</body>
</html>

When to use absolute?

✅ Positioning an element inside a specific container.
✅ Overlapping elements like modals, tooltips, dropdowns.

🔹 Example: Placing a tooltip over a button.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tooltip Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 100px;
        }
        .tooltip-container {
            position: relative;
            display: inline-block;
        }
        .tooltip {
            visibility: hidden;
            width: 150px;
            background-color: black;
            color: #fff;
            text-align: center;
            padding: 8px;
            border-radius: 5px;
            position: absolute;
            bottom: 125%;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0;
            transition: opacity 0.3s;
        }
        .tooltip-container:hover .tooltip {
            visibility: visible;
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="tooltip-container">
        <button>Hover over me</button>
        <div class="tooltip">This is a tooltip!</div>
    </div>
</body>
</html>

When to use fixed?

✅ Creating a sticky navigation bar.
✅ Making floating buttons (like WhatsApp chat).

🔹 Example: Keeping a floating chat button in the bottom-right.

.chat-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

When to use sticky?

✅ Keeping headers visible while scrolling (navigation header).
✅ Making section titles stick at the top (Example in table).

🔹 Example: Making a table header stay visible.

th {
    position: sticky;
    top: 0;
    background: white;
}

Conclusion

  • Use relative when you want an element to move slightly from its normal position.
  • Use absolute when you want an element inside another element but freely positioned.
  • Use fixed for elements that should stay visible while scrolling.
  • Use sticky when an element should stick at a position while scrolling.

Tags:

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *