CSS Position Property with Examples

CSS (Cascading Style Sheets) is used to style web pages. One important property in CSS is the position property. It helps you control where elements appear on the page. Let's check the different values of the position property and see how they work with some simple examples.

Position Values

There are five main values you can use with the position property:

1. Static

static is the default position value. It means the element will be placed in the normal flow of the document. It won't be affected by top, bottom, left, or right properties.

div {
    position: static;
}

This is how most elements are positioned by default.

2. Relative

relative means the element will be positioned relative to its normal position. You can move it using the top, bottom, left, and right properties.

div {
    position: relative;
    top: 10px;
    left: 20px;
}

This example moves the element 10px down and 20px to the right from where it normally is.

3. Absolute

absolute means the element will be positioned relative to the nearest positioned ancestor. If there isn't one, it will be positioned relative to the initial containing block (usually the whole page).

div {
    position: absolute;
    top: 50px;
    left: 100px;
}

This example places the element 50px from the top and 100px from the left of its nearest positioned ancestor.

4. Fixed

fixed means the element will be positioned relative to the viewport (the browser window). It will stay in the same place even when you scroll the page.

div {
    position: fixed;
    top: 0;
    right: 0;
}

This example places the element at the top-right corner of the browser window.

5. Sticky

sticky means the element will switch between relative and fixed positioning depending on the scroll position. It "sticks" to a certain point when you scroll past it.

div {
    position: sticky;
    top: 0;
}

This example makes the element stick to the top of the page when you scroll past it.

Examples

Relative Positioning Example

Here's an example of a relatively positioned element. It moves a bit from its normal spot:

<div style="position: relative; top: 30px; left: 30px; background-color: lightblue;">
    I am relatively positioned
</div>

Absolute Positioning Example

This example shows an absolutely positioned element inside a relatively positioned container:

<div style="position: relative; width: 300px; height: 200px; background-color: lightgray;">
    <div style="position: absolute; top: 50px; left: 50px; background-color: lightblue;">
        I am absolutely positioned
    </div>
</div>

Fixed Positioning Example

This example shows a fixed element that stays in place even when you scroll:

<div style="position: fixed; bottom: 0; right: 0; background-color: lightblue;">
    I am fixed
</div>

Sticky Positioning Example

This example shows a sticky element that sticks to the top of the page when you scroll past it:

<div style="height: 1500px;">
    <div style="position: sticky; top: 0; background-color: lightblue;">
        I am sticky
    </div>
    Scroll down to see the sticky effect
</div>

Conclusion

The CSS position property is very useful for controlling where elements appear on your web page. By understanding the different values (static, relative, absolute, fixed, and sticky), you can create layouts that look great and work well.