In web development, the layout and positioning of elements on a web page is essential to creating visually attractive design. CSS provides a variety of options for positioning elements, allowing developers to create complex layouts & designs. In this article, we will explore the different positioning properties in CSS, including static, relative, absolute, fixed, and sticky.

This article is suitable for web developers and designers who are looking to improve their knowledge of CSS and its usage in web design (Here are my articles, you might want to check out for some basics: Introduction to Web & HTML & Introduction to CSS).

By the end of this article, you will have a comprehensive understanding of the different positioning properties in CSS and how to use them to create dynamic web designs. You can also find links to code source that are related to this article at the end.

The position property

The CSS position is used to set the position of an element. As we learn in the last article of Box-Model, every element on a web page is a block. So we can understand how the positioning is used to get the block exactly where you want them.

There are five positioning methods. We will see them one by one.

Syntax:

position: static;
position: absolute;
position: relative;
position: fixed;
position: sticky;

1. position: static;

Static is the default value of the position property. It's not positioned in any special way. Static simply means that the element will flow normally into the page.

Example:

    .box1{
        position: static;/* No need to write  because it's by default */
        background-color: #FF6263;
        }

2. position: absolute;

This is a compelling type of positioning that allows you to place elements wherever you want. You will have to assign the positioning attributes top, left, bottom, and right to set the location of the element. If the element has a parent element then these values will be relative to its parent element that is subjected to either relative or absolute positioning. However, if an absolutely positioned element has no positioned parent, it will be placed relative to the page itself.

Example:

    .box2{
        position: absolute;
        background-color: #1B98F5;
        left: 200px;
        top: 120px;
         }

3. position: relative;

This type of positioning is very significant in allocating the position of the element. It will be relative to its normal position if we set the top, right, bottom, and left properties of a relatively-positioned element. Other elements will not be affected by Relatively positioned elements.

If you set position: relative; but no other positioning values (top, left, bottom or right), it will have no effect on its positioning at all, it'll behave like position: static;

It gives the ability to use the z-index on that element, even if you don’t set a z-index value, this element will now appear on top of any other statically positioned element. It also limits the absolute positioned child element within that block means it will take an absolute position concerning its relatively positioned parent element.

Example:

    .box3{
        background-color: #38CC77;
        position: relative;
        left: 115px;
         }

4. position: fixed;

This type will come in handy when you want some element to stay visible all the time for example navigation or chat box irrespective of the page's scroll position. An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.

 .box4{
        background-color: #F7CD2E;
        position: fixed;
        right: 30px;
        bottom: 0;
    }

5. position: sticky;

This type of positioning is kind of combination of relative and fixed positioning which will behave like a relative value until the scroll location of the viewpoint reaches a specified offset position then it will behave like fixed position property. It will make much more sense when you refer to the code pen that I have attached below.

Example:

   .box5{
        background-color:#6A1B4D ;
        position: sticky;
        top: 10px;
        left: 600px;
         }

---

Demo of Positioning Types:

---

Conclusion:

In conclusion, by utilizing CSS positions, you can manipulate the layout of HTML elements to achieve the desired design. I hope this article has provided a comprehensive understanding of the CSS positions layout.

To further enhance your CSS layouts, I recommend checking out my next articles on CSS Flexbox and CSS Grid layouts:

• Introduction CSS Flexbox.

• Introduction to CSS Grid layout.

These articles will provide you with the necessary knowledge to create more complex and dynamic layouts for your web pages. By mastering these concepts, you will be well on your way to creating beautiful and responsive web designs. So stay tuned and keep learning!

---

Here link to code files:- GitHub.

If you want to learn more about this topic, here are few resources below that you might want to check it out:

• CSS Positioned Layout Module Level 3.

• Position.

• Absolute Positioning Inside Relative Positioning.

Thank you for reading. If you found it helpful, then feel free to comment.😇😇