Why do we need Positioning?

Positioning allows you to take elements out of normal document flow and make them behave differently. It allows us to produce interesting results by overriding normal document flow.

There are different types of positioning that you can put into effect on HTML elements.

• Static positioning
• Relative positioning
• Absolute positioning
• Fixed positioning
• Sticky positioning

To make a specific type of positioning active on an element, we use the CSS position property.

Position:

The position CSS property sets how an element is positioned in a document.

position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

The top, right, bottom and left properties determine the final location of positioned elements.

1. Static

Static positioning is the default that every element gets. It just means "put the element into its normal position in the document flow — nothing special to see here."

The element is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect. This is the default value.

/*HTML code*/
<div class="first color1">
  position: static (by default)
</div>

<div class="second color2">
  position: static (by default)<br>
  top: 50px (this has no effect)
</div>

<div class="third color3">
  position: static<br>
  top: 50px (this also has no effect)
</div>

/*CSS code*/
.first {  
/* No position set, so it's static */ 
}

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

.third {
/* position set to static */
  position: static;
  top: 50px;
}

output

2. Relative

Relative positioning is very similar to static positioning, except that once the positioned element has taken its place in the normal flow, you can then modify its final position, including making it overlap other elements on the page.

Using position: relative will now unlock the other CSS layout properties. Now, by setting position to relative, you won't see a change in the result at all.

In order to modify the element's position. You need to use the top, bottom, left, and right properties. These properties are used alongside position to specify exactly where to move the positioned element to.

You can see that the third element is now 50px below the second one, adding space between them.

.first {  
/*   by default position is static */
}

.second {
   position: relative;
}

.third {
  position: relative;
  top: 50px;
}

output

Relatively positioned parent and child elements

Here in this code, we use a Parent element with a Child element nested in it. Let us see how it will behave.

/* HTML Code*/
<div class="parent color1">
  Parent position: relative<br>
  <div class="child color2">
  Child position: relative<br>
</div>
</div>

/* CSS Code*/
.parent {  
  position: relative;
}

.child {
   position: relative;
   top:0;
   left:0px;
}

output

3. Absolute

Elements that are relatively positioned remain in the normal flow of the document. In contrast, an element that is absolutely positioned is taken out of the flow; thus, other elements are positioned as if it did not exist.

The absolutely positioned element is positioned relative to its nearest positioned ancestor (i.e., the nearest ancestor that is not static). If a positioned ancestor doesn't exist, it is positioned relative to the ICB (initial containing block), which is the containing block of the document's root element. Absolute positioning brings very different results.

/*HTML code*/
  <div class="box1 color1">
    position: static(by default)
  </div>
  <div class="box2 color2">
    position: absolute
  </div>

/*CSS code*/
.box1 {
   /* by default position is static */
}

.box2 {
   position: absolute;
}

output

Here in the output, the one, three, and four blocks are behaving like block two doesn't even exist. The third block is behind block two, we can see it by moving block two using top, left, right, and bottom properties.

/*CSS Code*/
.box1 {
  /* by default position is static */
}

.box2 {
   position: absolute;
   left:0;
   top:0;
}

output

Relatively positioned parent with absolutely positioned child element

Here in this code, we use a Parent element with a Child element nested in it. Let us see how it will behave.

/* HTML Code */
<div class="parent color1">
  Parent position: relative
  <div class="child color2">
  Child position: absolute
</div>
</div>

/* CSS Code */
.parent {  
  position: relative;
}

.child {
   position: absolute;
   top:0px;
   left:0px;
}

output

4. Fixed

Fixed positioning works in exactly the same way as absolute positioning, with one key difference: whereas absolute positioning fixes an element in place relative to its nearest positioned ancestor (the initial containing block if there isn't one), fixed positioning usually fixes an element in place relative to the visible portion of the viewport.

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.

An exception to this occurs if one of the element's ancestors is a fixed containing block because its transform property has a value other than none. This means that you can create useful UI items that are fixed in place, like persistent navigation menus that are always visible no matter how much the page scrolls.

/*CSS Code*/
.box1 {
  position: relative;
}

.box2 {
  position: fixed;  
  top: 0px;
  left: 0px;
}

output

5. Sticky

Sticky positioning is a hybrid between relative and fixed position. It allows a positioned element to act like it's relatively positioned until it's scrolled to a certain threshold (e.g., 10px from the top of the viewport), they will get taken out of the normal flow and behave like position: fixed wherever you have positioned them.

In this code example, we have our blue sticky element between two purple elements containing a lot of text.

/*CSS Code*/
.box1 {
  position: relative;
}

.box2 {
  position: sticky;  
  top: 0px;
}

Here in the below output, as you scroll down the page, when you see the blue element come into the viewport, it seems like a normal, relatively positioned element. But as you keep scrolling, instead of scrolling off the page, it will become fixed and stick to the top of the viewport.

Just like fixed elements, a sticky element must have top or bottom set in the CSS. If it doesn’t have it, the element will continue to behave as if it was relatively positioned, and will never become sticky.

output

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 😊