Akash Kadlag

Posted on Aug 23, 2022

CSS Position Ultimate Guide 2022.

#css #webdev #beginners #tutorial

Confused with CSS Position...?

In this article, I will be breaking down all CSS position properties and explaining everything you need to know about them. This includes even the more obscure concepts related to the position that most articles/videos ignore.

Prerequisite

To get the most out of this article, we need the following:

Basic understanding of HTML.
Basic understanding of CSS. (check out CSS Selctors)
Visual studio code or any IDE of our choice to code along.

CSS Positions

When building a webpage, there can be multiple elements on our page, each with their own positions, uses, and designs. It’s important to learn how we can arrange these elements and have control over their layout.

The position property in CSS determines how an element is positioned in a document. It specifies the type of positioning method for each element.

Values of CSS Positions

The position property can have any of these values:

static
absolute
relative
fixed
sticky

You can also specify the value of inherit, which means the value is determined from the parent element. The position value doesn’t cascade, so this can be used to specifically force it to, and inherit the positioning value from its parent.

Placement Properties

Position property on its own is not that useful. It only says how the position should be calculated. For example, relative to the normal position of an element.

But we also need to define where exactly the element should be placed, not only how. There are several properties we can use for that.

top
left
right
bottom
z-index

These define how much the element's position should be adjusted and in which direction.

Normal Flow

Before going into details, let's see how these elements automatically get their position on your page. To understand this, you need to understand the normal flow of the web page. Normal flow is how the elements are arranged on a page if you haven't changed their layout.

There are two types of elements on a web page. Block-level elements and inline elements.

Block-level elements such as <h1>, <div>, <p> are contained on their own line. Because block-level elements start with a line break, two block-level elements can't exist on the same line without styling.

Inline elements such as <a>, <img>, <span>, don't form their own blocks. Instead, they are displayed within lines. They line up next to one another horizontally; when there isn't enough space left on the line, the content moves to a new line.

Static Position

position: static is the default value provided by HTML. This means if we don’t declare position for an element in CSS, it will automatically be set to static.

Even though it is a default value, it can sometimes be useful to set it explicitly. For example, to override different position value, which is set elsewhere.

Elements that are statically positioned will follow the normal document flow and will position itself based on the standard positioning rules.

Unlike with other position values, when using static, placement properties such as top, left, bottom, right, or z-index have no effect.

Example to illustrate Static Position :

We are using the following HTML markup:

<div class="parent">
    Parent
    <div class="one">
      One <br>
      position:static <br>
      top: 50px ( this has no effect )
   </div>
    <div class="two">Two</div>
    <div class="three">Three</div>
</div>

And here’s the CSS we’re using:

.parent { 
   // No position set, so it's static 
} 
.one { 
   // No position set, so it's static 
   top: 50px; 
}

However, here is how it will look on a webpage:

View original code in CodePen

Since both elements have a static position, none of the layout CSS properties will do anything. This makes the top property have no effect on how the element with class="one" is displayed.

Relative Position

Relative position means that the element is placed relative to its original position in the page. A relative position element works exactly the same as static position, but you can now add z-index, top, left, right, and bottom properties to it.

If you make an element relative positioned without setting any of these extra properties you will notice it looks exactly the same as a static positioned element. This is because relative positioned elements also follow the normal document flow, but you can offset them using the top, left, right, and bottom properties.

Example to illustrate Relative Position :

We are using the following HTML markup:

<div class="parent">
    Parent
    <div class="one">One</div>
    <div class="two">Two</div>
    <div class="three">Three</div>
</div>

And here’s the CSS we’re using:

.one {
  position: relative;
  top: 15px;
  left: 15px;
}

However, here is how it will look on a webpage:

View original code in Codepen

As a result of an element being moved from its original position, there can be a situation, where multiple elements overlap each other. Fortunately, with z-index property, you can control which elements should be in the front and which in the back. We'll discuss this in more detail later.

Only relative position is not that useful as you do not usually want to offset an element without also moving all the elements around it. The main use cases for position relative are to either set the z-index of the element, or to be used as a container for absolute positioned elements which we will talk about next.

Absolute Position

The absolute position completely removes the element from the normal document flow. If you give an element position absolute all other elements will act as if the absolute positioned element doesn't even exist.

An element using position: absolute is positioned relative to the nearest ancestor. In other words, an element with position: absolute is positioned relative to its parent element.

If an element doesn’t have a parent element, it’s placed relative to its initial containing block. It can then be positioned by the values of top, right, bottom, and left.

Note : If we don’t specify helper properties, it’s positioned automatically to the starting point (top-left corner) of its parent element.

Example to illustrate Absolute Position :

We are using the following HTML markup:

<div class="parent">
    Parent
    <div class="one">One</div>
    <div class="two">Two</div>
    <div class="three">Three</div>
</div>

And here’s the CSS we’re using:

.parent {
  position: relative;
}

.one {
  position: absolute;
  top: 0;
  right: 0;
}

However, here is how it will look on a webpage:

View original code in Codepen

By setting the blue parent element to a position of relative I am now forcing the absolute positioned child one element to be in the top right corner of the parent instead of the body. This combination of relative and absolute positions is incredibly common.

Fixed Position

The fixed position is a bit like absolute position in that it removes the element out of the normal flow, but fixed position elements are always positioned in the same place in the viewport (what’s visible on screen). This means that scrolling will not affect its position at all.

Example to illustrate Fixed Position :

We are using the following HTML markup:

<div class="parent">
    Parent
    <div class="one">One</div>
    <div class="two">
       Two <br>
       Ha ha! Scrolling can't get rid of me!!
    </div>
    <div class="three">Three</div>
</div>

And here’s the CSS we’re using:

.two {
  position: fixed;
  top: 0;
  right: 0;
}

However, here is how it will look on a webpage:

View original code in Codepen

The pink fixed element will stay positioned at the top and right corner of the viewport. And if you scroll, the blue parent element and other child elements will scroll up normally, but the pink element will remain stuck to where we positioned it.

Tip: A fixed element must have a top or bottom position set. If it doesn’t, it will simply not exist on the page at all.

You have to be careful with fixed position usage. On a mobile device with a small screen, it can be a big deal if a large portion of your screen is always covered with a navigation bar or something similar. It dramatically reduces space for the actual content of your page and can significantly limit usability.

Sticky Position

The sticky position is a combination of both fixed and relative position and combines the best of them both.

An element with position sticky will act like a relative positioned element until the page scrolls to a point where the element hits the top, left, right, or bottom value specified. It will then act like a fixed position element and scroll with the page until the element gets to the end of its container.

In other words, elements set with position: sticky are positioned based on the user’s scroll position.

As of this writing, it is currently an experimental value, meaning it is not part of the official spec and is only partially adopted by select browsers. In other words, it’s probably not the best idea to use this on a live production website.

Example to illustrate Sticky Position :

We are using the following HTML markup:

<div class="parent">
    Parent
    <div class="one">One</div>
    <div class="two">
       Two <br>
       I stick at the top <br><br>
       position: sticky <br>
       top: 0px;
    </div>
    <div class="three">Three</div>
</div>

And here’s the CSS we’re using:

.two {
  position: sticky;
  top: 0;
}

However, here is how it will look on a webpage:

View original code in Codepen

sticky position is the perfect position for navbars that scroll with the page, headings in long lists, and many other use cases.

Z-index

When working with position other than static, elements can easily appear in position, where they overlap each other.

This is where the z-index property comes in. When you have elements overlapping, we use z-index to stack them. It controls the position of your elements on the z-axis.

You can use z-index like this:

 z-index: 1;

The z-index gives you the ability to decide how the elements should overlap each other, in which order. If you give a higher z-index value, that particular element will appear closer to the viewer. In other words, it will appear on top of the other elements.

Example to illustrate Z-index:

We are using the following HTML markup:

<div class="parent">
    Parent
    <div class="one">One</div>
    <div class="two">
       Two <br>
       I stick at the top <br><br>
       position: sticky <br>
       top: 0px;
    </div>
    <div class="three">Three</div>
</div>

And here’s the CSS we’re using:

.first{
  z-index: 3;
}

.second{
  z-index: 2;
}

.third{
  z-index: 1;
}

.four{
  /* No z-index */
}

.fifth{
  z-index: -1;
}

However, here is how it will look on a webpage:

View original code in Codepen

Summary

Let's sum it up. The position property allows you to determine how elements should be placed on the page.

You can define the exact location using top, bottom, right and left properties.

In case your elements overlap each other, you can change their order using z-index. The higher the index, the closer is the element to the user.

static

Default value
Positioning as usual, same as if you didn't specify the position

relative

The element is placed relative to its normal position on the page
The place occupied by the element is preserved at its original location

absolute

The element is removed from the normal flow and does not occupy space
The location is determined relative to the first parent set position (other than static)
If there is no such parent, it is determined relative to the whole page.

fixed

The element is removed from the normal flow and does not occupy space
The location is determined relative to the viewport
Elements keep their locations as you scroll

sticky

Elements are positioned relatively until you reach them by scrolling
Then the elements stick to one location, similar to fixed positioning
Not supported by all the browsers, you can check out the current support on CanIUse.com.

In closing

I hope that you’ve found this tutorial and code examples on CSS positioning helpful...! If you have any questions or feedback, feel free to leave a comment below.

If you found this article helpful, please like and share it 💙.

That's all for today! 😁 You reached the end of the article 😍.