Position

In the previous lesson, we used the .fixed class which manipulated the CSS property position and allowed us to attach a Navbar to the top of the screen.

Let's look at this topic a little closer because it often causes confusion.

The position property has four possible values, each of which affects how an element is positioned within its containing element or the viewport.

static

This is the default value, and elements with position: static are positioned according to the normal flow of the document. This means they are not affected by the top, right, bottom, or left properties.

However, remember that the default setting is the top left corner.

In Tailwind CSS we use the .static class to set the position property to static.

fixed

This is the property that we used in the previous lesson to attach the Navbar to the top of the screen.

Elements with position: fixed are positioned relative to the viewport (that is browser window). They stay in the same position even when the page is scrolled.

In Tailwind CSS we use the .fixed class to set the position property to static.

absolute

Elements with position: absolute are positioned relative to their closest positioned ancestor (an ancestor with a position value other than static). If there's no such ancestor, they are positioned relative to the initial containing block, usually the viewport.

In Tailwind CSS to control a placement of absolute elements we are using classes top-* , bottom-*, left-* and right-* together with absolute class.

relative

Elements with position: relative are positioned relative to their normal position in the document flow. You can use the top, right, bottom, and left properties to adjust their position relative to where they would be in the normal flow.

In most of cases we are using relative position for a containers that holds absolute positioned elements.

As you can see in the example below, static container is ignored by absolute positioned element.

However, if we change the position of the container to relative, the absolute element will not ignore it anymore.

In Tailwind CSS we use the .relative class to set the position property to relative.