Position

Document Flow and Positioning

HTML documents are displayed on the page from top to bottom, so the elements that are described higher in the HTML file will be rendered in the browser earlier than those described lower. This makes the display of the page in the browser pleasantly predictable.

The order in which the elements are displayed on a page by default is called normal flow. It corresponds to the value of the static position property. Changing the values of that property will change the flow of the document, which is a process called positioning. In this topic, you will learn about different types of positioning and understand how to work with them.

Absolute positioning

Absolute positioning allows you to place an element relative to its nearest positioned ancestor (an element with any position value other than static). If no such ancestor exists, it is positioned relative to the initial containing block, which is typically the browser's viewport. Here is the syntax:

element {
  position: absolute;
}

In other words, If there is no parent element, then it is set relative to the bounds of the browser viewport. So, with absolute positioning, the browser window will act as a parent from whose borders the distance is set:

Of course, it can also be set from the border of a parent element that has any position other than static:

If you are a little confused about how absolute positioning compares to the normal flow, let's consider an example. In the picture below, four blue blocks are positioned in the normal flow, that is, their position is set to static by default:

Now, let's do a trick and change the positioning of the element $2$ to absolute:

Uh-oh, it looks like we messed it up! The elements in the normal flow neatly follow each other and occupy their space on the page. Absolute positioning basically pulls the element out of the normal flow and, as it happened in our example, lifts it up. Element $2$ rises to the absolute level, and since it is not on the plane between the elements $1$ and $3$, they shift towards each other.

So, the absolute plane lies on top of the static plane, which gives the blending effect like in the above example. Keep this feature in mind when working with absolute positioning!

In most cases, absolutely positioned elements have auto width and height sized to match their content. They can also be stretched to their full width or height if you don't set the element size manually, that is, if you leave it as auto. To do this, you need to set the top and bottom or left and right properties to $0$. This can come in handy, for example, to fill the entire height of the container:

.parent {
  position: relative;
  border: 1px solid blue;
  height: 150px;
  width: 200px;
}
 
.child {
 position: absolute;
 width: 50px;
 background-color: rgb(250, 135, 135);
 top: 0;
 bottom: 0;
}

Filling the width works in a similar way:

.child {
 position: absolute;
 height: 50px;
 background-color: rgb(250, 135, 135);
 left: 0;
 right: 0;
}

Having the position: relative in the parent class, makes the child class position itself relative to the parent.

Relative positioning

A relatively positioned element is set relative to its original position on the page. That means, Relative positioning allows you to shift an element from its normal position on the page without removing it from the document flow. Other elements will still respect its original space. Take a look at the syntax:

element {
  position: relative;
}

Let's visualize it and consider an example. Here are four relatively positioned blocks:

Now, we'll move the even-numbered blocks to the right and the odd-numbered ones to the left by 50px:

The blocks have shifted from the center to the left and right. But relatively positioned elements have a peculiarity that distinguishes them from absolutely positioned elements. To see it, let's consider the same four blocks, but this time, only block $3$ will be position: relative, and the rest will remain in the normal flow. To make the example a little clearer, let's move that block up a little:

Block $3$, as expected, moved up by the distance that was indicated, but pay attention to the empty space where the third element had been earlier. The difference with relative positioning is the fact that the block exists on the page materially (the display of other elements around this block is calculated based on the space it occupies), but it still rises to a higher plane as an absolutely positioned element would. This way, block $3$ overlapped with block $2$, and block $4$ stayed in place and did not move up.

Why does it matter? This behavior allows you to move page elements anywhere without breaking the layout of the site because the occupied space remains duly occupied.

Fixed positioning

Fixed positioning is similar to absolute positioning, but the element is positioned relative to the browser's viewport. It stays in the same position even when the page is scrolled.

Let's consider an example. Look at the code below and see how you can set the position of an element to be fixed:

element {
  position: fixed;
}

<div class="body">
     <header class="header">
       <h2>Images are from Pixabay</h2>
     </header>
     <div class="content">
       <img src="https://cdn.pixabay.com/photo/2015/03/26/09/52/chain-link-690503_1280.jpg">
       
       <img src="https://cdn.pixabay.com/photo/2020/02/05/18/38/jungle-4822003_1280.jpg">
       
       <img src="https://media.istockphoto.com/photos/tropical-forest-trees-in-sunlight-and-rain-picture-id178502011?s=612x612">
       
       <img src="https://media.istockphoto.com/photos/celeste-river-costa-rica-picture-id1222643210?s=612x612">
       
     </div>
</div>

h2 {
  margin: 0;
  text-align: center;
  position: fixed;
  background-color: lightblue;
  width: 100vw;
  height: 100px;
}

img {

  display: block;
  margin-left: auto;
  padding-bottom: 10px;
  margin-right: auto;
  width: 70%;
}

Here is what the result looks like:

Spectacular! The header stays in place as the page scrolls with the images.

Fixed positioning is often used for subheadings, menu buttons, content logos, back-to-top buttons, and so on.

Sticky positioning

The last type we will consider is called sticky positioning. In terms of functionality, it is between fixed positioning and relative positioning: the element is positioned relatively until the page is scrolled to a certain point, after which the positioning will be fixed.

element {
  position: sticky;
}

<div class="container">
  <div class="main blue"></div>
  <div class="main purple"></div>
  <div class="main red"></div>
  <div class="main yellow"></div>
  <div class="main orange"></div>
</div>

.container {
  margin-left: 300px;
}
.main {
  position: sticky;
  top: 10px;
  width: 120px;
  height: 120px;
  margin-bottom: 150px;
  border: 1px solid rgba(0, 0, 0, .2);
}

.blue {
  background: #13b4ff;
}

.purple {
  background: #ab3fdd;
}

.red {
  background: #ae163e;
}

.yellow {
  background: #FFFF00;
}

.orange {
   background: #FFA500;
}

Note that in order for this type of positioning to work, you need to specify the limit point. The blocks will stop at this limit point, which in our case is the top property, 10px. When you're scrolling the page and reach that point, the elements will stack one on top of the other as shown in the animation below:

If the top property is removed, the positioning will be similar to the relative:

Conclusion

Thanks to positioning, we can flexibly control the position of the elements on the page. It is used to create a variety of styling solutions for page interfaces, and only imagination can limit its use.