Hey, there! Wondering how to position an HTML element inside a document?

Thanks to CSS. CSS gives us five different position properties to place an element on a webpage.

The five positions are:

• Static

• Relative

• Absolute

• Fixed

• Sticky

Let us understand each of these CSS Properties in detail with some code samples.

Static

This is the default CSS position of the browsers. The elements in the webpage are ordered or positioned one below the other like a stack. This follows the flow of the HTML document.

Top, Right, Bottom, Left and z-index values don't have the effect when this position is used.

In the above snapshot, the div element is set to position: static. I also gave left:10px, top:10px , it doesn't move the div 10px away from the left. These values don't work when a position is set to static.

Relative

Elements are positioned as per the flow of the HTML code. We can use the CSS properties left, top, right, bottom and z-index to position the items on the webpage. This doesn't affect other positions of elements.

As in the above snapshot, I have moved the first div behind div2 by giving the left 20px and the top 20px. As you can see, the position of div2 isn't impacted by the values of the first div.

Suppose, we want the first div to show on the div2. We need to use the z-index for that. Below I set the value of the z-index to 1 to move the first div on the div2.

Absolute

The element to be positioned absolute is removed from the actual flow of the HTML code. The element takes the positioned parent's position. If it doesn't find the nearest positioned parent element, it considers the document body and moves as the page scrolls. On using absolute property, the element overlaps on other HTML elements.

In the above snapshot, I set the position of div2 as absolute. As we can see div2 also moves to the left by 20px by default considering the parent element's padding value which is 20px in this case. This doesn't happen in the case of position relative, as the default value is always left:0 for the relative property. In absolute, we need to specify as left 0 or right 0. This case is if it is inside a parent element.

Now, Let us delete the position relative given for the first div, and see that div2 takes the position value of the document body and we can see the div moves up and down on the page scroll.

Fixed

On using position fixed, the position of the element remains at the same place on the page scroll. Left, Right, Top, Bottom and z-index values can be used to position the element. This majority will be used for having the side links to be fixed on one side.

Is usually positioned according to the relative of the initial block or viewport. The element is always placed in the same place on all pages until the viewport or if the parent elements have transform, perspective or filter properties used.

Div2 takes the top 20px and places the element.

Sticky

The sticky position is set based on the user's scrolling position. Sticky element toggles between relative and sticky based on the scrolling of the web page. Initially, it will be position relative until it reaches a certain offset value and later considers position sticky.

In the above example, the sticky sits on top of the page scroll after the first div is scrolled up. The elements below the sticky div scroll behind the sticky div. Sticky position is used for making the main menu's or nav sticky on page scroll.