In Web Development, positioning elements in HTML is essential to eventually get the kind of designs you have made or place pieces in different places. The CSS position property is crucial in getting these accomplished. This article will look at positioning other elements using CSS and making additional adjustments to them.

Introduction⌗

To explain positioning better, I’m going to create a div with three other div elements in it.

<div class="container">
    <div class="one">Red</div>
    <div class="two">Green</div>
    <div class="three">Blue</div>
</div>

Next, I will apply the relative property to the two CSS classes. The CSS will look like this:

.container {
  background-color: blanchedalmond;
  padding: 5px;
}
.one {
  background-color: red;
  height: 20px;
  width: auto;
}

.two {
  background-color: green;
  height: 20px;
  position: relative /** Set the position */
}

.three {
  background-color: blue;
}

The results for this CSS and HTML will be like this:

Figure 1
Figure 1: Setting the position CSS property to relative.

You can find a working example here1.

Position Relative⌗

Initially, you will see nothing has changed after setting the position CSS property to relative. However, the element with the CSS class two has been able to maintain its position in the document as well as have access to four other new properties that we can use to position it; top, bottom, left and right.

To see this in action, I will add left: 20px; to the CSS class two. This will move the second element 20px left of the parent container div.

The updated CSS will look like this:

.two {
  background-color: green;
  height: 20px;
  position: relative;
  left: 20px;
}

and the results will look like this:

Figure 2
Figure 2: Adding the left CSS property to 20px.

The second element is now not part of the document flow. To demonstrate that further, you can add the top: 20px property to the CSS class two and you will see that it moves over the third element.

Figure 3
Figure 3: Adding the top CSS property to 20px on the second element.

You can alter the position of the element relatively and change it to move to whichever part you want it to be.

You can find a working example here2.

Position Absolute⌗

This property gets the element completely out of the document flow. To demonstrate that, I will change the position property on the second div class to absolute.

.two {
  background-color: green;
  height: 20px;
  position: absolute;
}

This will result to:

Figure 4
Figure 4. Setting position CSS property to absolute.

The Green is now over the Blue. You still have the ability to use the top, bottom, left and right CSS properties.

Changing top: 0px; will result to this:

Figure 5
Fig 5: Adding the top CSS property and setting it to 0px.

This is because the absolute position goes up the DOM tree and searches for parents that have the position besides static. In the event there’s none, it positions itself relative to the body as we can see from the figure above.

To see it positioned relative to a parent that has other position attributes apart from static, set the CSS container position to relative and you will see that the Green div is positioned relative to it:

.container {
  background-color: blanchedalmond;
  padding: 5px;
  position: relative;
}
.two {
  background-color: green;
  height: 20px;
  position: absolute;
  top: 0px;
}
Figure 6
Fig 6: Setting the relative position to the container.

Absolute positioning is useful for elements that you want to stick out like modals.

See a working example here3.

Position Fixed⌗

The content will appear the same way that position absolute does only that it will be positioned relative to the viewport. This means, when we scroll through the page, the element will remain in it’s fixed position relative to the viewport.

You still have the ability to use the top, bottom, left and right CSS properties.

Some uses for this could be for fixed elements like CTAs, social media links etc.

You can find a working example here4.

Position Sticky⌗

It is positioned relative to the scrolling context. When you have a scroll and you want the element to remain stuck at a certain position, this positioning will work perfectly. You will need to set the top, bottom, left or right CSS properties to see it triggered.

Applying a 400vh on the container CSS class and setting the position to sticky as well as the top: 0px; :

.container {
    background-color: blanchedalmond
    height: 400vh;
}
.two {
    background-color: green;
    position: sticky;
    top: 0;
}

These are useful for elements like headers.

You can find a working example here5.

Conclusion⌗

In this article, we see how to apply different positioning properties and when to use them. You are now able to simply position elements in your webpage and get that feel of the design that you want to achieve. For more examples and reading materials, you can check out the following links:

  • CSS Position - Mozilla6.
  • Master CSS positioning in 5 minutes7.

  1. https://stackblitz.com/edit/web-platform-agqcgf?file=position-relative.html ↩︎

  2. https://web-platform-agqcgf.stackblitz.io/position-relative.html ↩︎

  3. https://web-platform-agqcgf.stackblitz.io/position-absolute.html ↩︎

  4. https://stackblitz.com/edit/web-platform-agqcgf?file=position-fixed.html ↩︎

  5. https://stackblitz.com/edit/web-platform-agqcgf?file=position-sticky.html ↩︎

  6. https://developer.mozilla.org/en-US/docs/Web/CSS/position ↩︎

  7. https://dev.to/javascriptacademy/master-css-positioning-in-5-minutes-2n18 ↩︎