When an element is added to a web page, its position is automatically determined. If more than one element is added, their positions automatically adjust as default. However, the default position of any element may be changed using the CSS position attribute. Depending on the layout design, we adjust the positioning element.

Position property🔣

The z-index, left, right, top, and bottom attributes are used to place elements. The position property must be set before using these properties. Depending on the position value, they also operate differently. We have five values in CSS that we may use to adjust the element's position:

1. static

2. relative

3. absolute

4. fixed

5. sticky

1. 🤔Static💭

By default, HTML components are placed in a static position. The z-index, left, right, top, and bottom attributes have no effect on items that are static in their positions. The element is placed in accordance with the document's natural flow.

In this example, we can see that the box position was set to static and the left attribute was applied, but no changes occurred.

2. 🤔Relative💭

The document's natural flow is maintained by elements with position relative. When an HTML element has to be moved relative to its default position, this technique is utilised. The z-index, left, right, top, and bottom attributes have an effect on items that are relative in their positions. It will be moved from its natural location as a result of a relative-positioned element. It won't change another element to fill gaps created by relative elements.

In this illustration, we can see that when the box position is set to relative and the left and top attributes are used, the box moves and leaves a space and this space isn't being used by another element.

3.🤔Absolute💭

Positioning for elements with position: absolute is done in relation to their parent elements. The document body is used by an absolute positioned element if it lacks any positioned ancestors and scrolls with the page.

In this example, the image element is positioned as absolute and has its left and top attributes set. As a result, the image's parent is a box, and we need to set the box's position as relative to ensure that the image is positioned in accordance with the parent.

4. 🤔Fixed💭

Even after the page has been scrolled, an element with a position fixed will stay in that location. When we wish to fix the location of an HTML element regardless of where the user is on the page, we utilise the fixed position attribute. When an element is fixed, its original place on the page is not left blank.

In this case, the image was fixed so that it would stay in the location that we had set it to. The location remains in place no matter how we scroll since it is fixed.

5. 🤔Sticky

Sticky is the combination of relative and fixed positions. When a specific position offset is reached, an HTML element with the attribute position sticky will remain in place.

In this illustration, the picture is configured to be sticky, and after it has moved to the offset point, it is stuck there.

The discussion was concluded here. We discussed the information you need to know about positioning an element. I hope you liked it.

Happy learning😊