What is Position Relative in CSS?

Last Updated : 03 Sep, 2024

The position property in CSS can determine how an element is positioned on the webpage. The relative value for this property can allow you to position the element relative to its normal position in the document flow. It means that you can move the element from its default position without affecting the position of the other elements.

In the CSS, positioning can be controlled using the several values for the position property:

Static: The default position; elements can be positioned according to the normal document flow.
Relative: It can position the element to its normal position.
Absolute: It can position the element relative to its nearest positioned ancestor (or the initial containing the block if none exists).
Fixed: It can position the element relative to the viewport (the visible part of the browser window).
Sticky: The hybrid of the relative and fixed positioning that toggles between the two based on the user's scroll position.

Relative

The element with position: relative can be positioned relative to its normal position. This means you can use the top, right, bottom, and left properties to move the element from where it would normally be placed. The space for the elements can be preserved in the layout.

Syntax:

.element {
  position: relative;
  top: 10px;
  left: 20px;
}

Example: This features an element with relative positioning, offset by 10px from the top and 20px from the left, with a light coral background and padding.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Relative Position Example</title>
    <style>
        .relative-element {
            position: relative;
            top: 10px;
            left: 20px;
            background-color: lightcoral;
            padding: 10px;
        }
    </style>
</head>

<body>
    <h1 style="color: green;">GeeksforGeeks</h1>
    <div class="relative-element">This element is positioned
        relative to its normal position.</div>
</body>

</html>

Output:

Conclusion

The position: relative property in CSS can allows you to move the elements relative to their normal positions without affecting the layout of the surrounding elements. Understanding the different positioning values like static, relative, absolute, fixed and sticky helps in creating the flexible and dynamic webpage layouts. Each method can offers the unique advantages, making it essential to choose the appropriate the one based on the design needs.

What is the Position of an element relative to its container in CSS ?

geekforgs9hp

Improve

Article Tags :

What is Position Relative in CSS?

Relative

Syntax:

Conclusion

Similar Reads

Thank You!

What kind of Experience do you want to share?