Positioning elements is something we spend a lot of our time on when building sites and applications, so having a good understanding of how to place an element on a layout is crucial, especially when an element can have different positions depending on the available space.
Let's see what positioning is all about.
The position CSS property defines the location of an element.
There are five keyword values for the position property: static, absolute, relative, fixed, and sticky.
This is the default value of the position property. The element stays in the flow of the document and appears in the actual location where it's located in the markup.
The element is removed from the document flow and it's positioned in relation to its closest relative positioned ancestor element.
The element does not change positions unless one or several properties of top, right, bottom, or left are declared. It also creates a reference position for absolute positioned child elements.
The element is removed from the document flow just like the absolute positioned elements. However, unlike the absolute positioned elements, which are relative to an ancestor element, the fixed elements are always relative to the document.
This value is a mix between the relative and fixed positions. The element is treated as relative until a specific point or threshold is met, at which point the element is then treated as fixed. At the time of writing this, only Firefox supports this property.
CSS:
/*Position relative*/
.element {
position: relative;
}
/*When the element hits the top of the viewport, it will stay fixed at 20px from the top*/
.element {
position: sticky;
top: 20px;
}The top CSS property is closely tied to the position property.
This property specifies the distance of an element from the top of its current location if the element has position: relative; declared or from the top of its nearest ancestor when the ancestor has position: relative; and the element has position: absolute; declared.
If none of the ancestors have position: relative; declared, the absolute positioned element will traverse the DOM until it reaches the <body> tag, at which point it will position itself at the top of the page regardless of its location in the source HTML.
Negative values are valid.
The bottom CSS property is closely tied to the position property.
This property specifies the distance of an element from the bottom of its current location if the element itself has position: relative; declared or from the bottom of its nearest ancestor when the ancestor has position: relative; and the element has position: absolute; declared.
If none of the ancestors have position: relative; declared, the absolute positioned element will traverse the DOM until it reaches the <body> tag, at which point it will position itself at the bottom of the page regardless of its location in the source HTML.
It supports the following values:
auto: The auto keyword is the default value for thebottomproperty. The browser calculates the top position.Length value: For the length value, we use one of the following units:px,em,in,mm,cm,vw, and so on.Percentage value: For the percentage value, we use percentages like50%,85%, and so on.
CSS:
/*auto*/
.element { bottom: auto; }
/*Length value*/
.element { bottom: 20px; }
/*Percentage value*/
.element { bottom: 15%; }The left CSS property is closely tied to the position property.
This property specifies the distance of an element from the left of its current location if the element has position: relative; declared or from the left of its nearest ancestor when the ancestor has position: relative; and the element has position: absolute; declared.
If none of the ancestors have position: relative; declared, the absolute positioned element will traverse the DOM until it reaches the <body> tag, at which point it will position itself at the left of the page regardless of its location in the source HTML.
Negative values are valid.
The left property supports the following values:
auto: Theautokeyword is the default value for theleftproperty. The browser calculates the top position.Length value: For the length value, we use one of the following units:px,em,in,mm,cm,vw, and so on.Percentage value: For the percentage value, we use percentages like50%,85%, and so on.
CSS:
/*auto*/
.element { left: auto; }
/*Length value*/
.element { left: 20px; }
/*Percentage value*/
.element { left: 15%; }The right CSS property is closely tied to the position property.
This property specifies the distance of an element from the right of its current location if the element has position: relative; declared or from the right of its nearest ancestor when the ancestor has position: relative; and the element has position: absolute; declared.
If none of the ancestors have position: relative; declared, the absolute positioned element will traverse the DOM until it reaches the <body> tag, at which point it will position itself at the right of the page regardless of its location in the source HTML.
Negative values are valid.
It supports the following values:
auto: Theautokeyword is the default value for therightproperty. The browser calculates the top position.Length value: For the length value, we use one of the following units:px,em,in,mm,cm,vw, and so on.Percentage value: For the percentage value, we use percentages like50%,85%, and so on.
CSS:
/*auto*/
.element { right: auto; }
/*Length value*/
.element { right: 20px; }
/*Percentage value*/
.element { right: 15%; }The
vertical-align CSS property controls the vertical positioning of an element in order to align it to another element(s) next to it.
It accepts the following values:
baseline: This is the default value. It aligns the elements to the bottom, exactly at the last line of text regardless of the elements' line height. In other words, it aligns the last line of text to baselines of the elements.bottom: This aligns the elements' containers to the bottom. The text and line height of the elements are not considered, only the elements' containers to the bottom.Length value: For the length value, we use one of the following units:px,em,in,mm,cm,vw, and so on. Negative values are valid.middle: This aligns the elements to their horizontal center based on their vertical midpoint.Percentage value: For the percentage value, we use percentages like50%,85%, and so on. Negative values are valid.sub: This aligns the element to the subscript baseline of the parent container.super: This aligns the element to the superscript baseline of the parent container.top: This aligns the elements' containers to the top. The text and line height of the elements are not considered.text-bottom: This aligns the elements to the bottom based on the parent's text baseline. The line height of the elements is not considered, only the bottom of their containers is considered.text-top: This aligns the elements to the top based on the parent's text baseline. The line height of the elements is not considered, but the top of their containers is.