CSS Layout – The position Property

The position property specifies the type of positioning method used for an element. There are several positioning methods available in CSS.

1. position: static

The static positioning is the default positioning for HTML elements. Elements are positioned according to the normal flow of the document.

<div class="box" style="position: static;">Static Positioning</div>

<style>
.box {
    padding: 20px;
    background-color: #ddd;
    margin: 10px 0;
}
</style>

2. position: relative

The relative positioning allows an element to be positioned relative to its normal position.

<div class="relative">Relative Positioning</div>

<style>
.relative {
    position: relative;
    top: 10px;
    left: 20px;
    background-color: #b3e5fc;
}
</style>

3. position: absolute

The absolute positioning allows an element to be positioned relative to the nearest positioned ancestor or the initial containing block if no positioned ancestor is found.

<div class="box" style="position: relative;">
    Relative Parent
    <div class="absolute">Absolute Positioning</div>
</div>

<style>
.absolute {
    position: absolute;
    top: 50px;
    left: 50px;
    background-color: #ffccbc;
}
</style>

4. position: fixed

The fixed positioning allows an element to be positioned relative to the browser window, staying in the same place even when the page is scrolled.

<div class="fixed">Fixed Positioning</div>

<style>
.fixed {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: #dcedc8;
}
</style>

5. position: sticky

The sticky positioning allows an element to switch between relative and fixed positioning, depending on the user’s scroll position.

<div class="sticky">Sticky Positioning</div>

<style>
.sticky {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 0;
    background-color: #ffe0b2;
}
</style>

Conclusion

The position property is a powerful tool in CSS that allows you to control the positioning of elements on a web page. Understanding the different positioning methods and how to use them effectively can help you create more dynamic and visually appealing layouts.