CSS Positions: The Struggle is OVER

I remember when I started learning CSS, I was always confused about the CSS position property. Not knowing when to use the top, bottom, left or right attribute. Or even when I use them I don’t get my desired output.

IDEOLOGY

We will be using the below as our template HTML through out the document.

<body>
  <div id="parent">
    <div id="first_child">
    </div>
    <div id="second_child">
    </div>
    <div id="third_child">
    </div>
  <div>
</body>

CSS.

#parent{
  height: 210px;
  font-size: 25px;
  color: white;
  border: 3px solid green;
}
#first_child{
  height: 70px;
  background-color: red;
}
#second_child{
  height: 70px;
  background-color: blue;
}
#third_child{
  height: 70px;
  background-color: black;
}

When positioning an element with CSS, you have to take note of the position property of the parent. Cause if the parent and child positional property doesn’t correspond, you might not get the desired output.

An element that contains other elements is a parent element. And if the child it contains is also a parent then, it is a grand-parent element.

TYPES

pheeewwww. since we’ve got them out the way, There is five-position value in CSS. which are :

1. Static (non-positional)

2. Relative (positional)

3. Absolute (positional)

4. Fixed (positional)

5. Sticky (positional)

STATIC POSITION

This is the default property of all block elements. that is, even if an element’s position is not defined, it is statically positioned. If a child is statically positioned in the parent is doesn’t care about the position property of the parent. It positions itself according to how it’s defined in the parent. top, left, right, the bottom property doesn’t affect the static positioned element.

RELATIVE POSITION

The relative position is like the static position, in that it doesn’t care about the parent position. But it is different cause top, right, left, bottom property work on it. It is positioned relative to where it would be if it is statically positioned. If top, left, right, bottom property for relative position element not assigned, it will appear as though is it static positioned.

The image above results from positioning the second child with a relative position value with left and top property.

#second_child{
  height: 70px;
  background-color: blue;
  position: relative;
  left: 50px;
  top: 10px;
}

ABSOLUTE POSITION

It cares about the parent positional value. It positions relative to the nearest positional parent (relative, fixed, sticky). If a child has an absolute position value, it checks if the direct parent is a positional element. If his direct parent is not positional, it checks the grand-parents until he finds a positional parent or grand-parent. He then positions itself relative to the positional parent or grand-parent. If he doesn’t find any positional parent or grand-parent he positions itself relative to the body of the document.

The above image shows the third child position with absolute value. Because the parent is not a positional element, it is position relative to the body.

#parent{
  height: 210px;
  font-size: 25px;
  color: white;
  margin-top: 50px;
  border: 3px solid green;
}
#third_child{
  height: 70px;
  background-color: black;
  position: absolute;
  top: 10px;
  left : 50px;
}

As the parent becomes a positional element, then the third child will be position relative to the parent.

#parent{
  height: 210px;
  font-size: 25px;
  color: white;
  margin-top: 50px;
  border: 3px solid green; 
  position: relative
}
#third_child{
  height: 70px;
  background-color: black;
  position: absolute;
  top: 10px;
  left : 50px;
}

FIXED POSITION

Element with fixed position behaves as though they don’t have a parent. Even when wrapped inside a parent element, they are always positioned to the viewport. That is, fix positioned element will always show on the screen regardless of the scrolling position of the page.

#parent{
  height: 210px;
  font-size: 25px;
  color: white;
  margin-top: 50px;
  border: 3px solid green;
}
#second_child{
  height: 70px;
  background-color: blue;
  position: fixed;
  top: 20px;
  right: 100px;
}

STICKY POSITION

The sticky positioned element behaves like a fixed positions element. In that, it behaves as though it doesn’t have a parent and is position relative to the viewport. the difference of it from the fixed-position element is that it doesn’t always stay in the viewport of the page. It is fixed in some offset position and then scrolls way when the offset exceeds.

CONCLUSION

The position property of CSS can be tricky at first but with practice, you will get a hang of it. Note that absolute position always finds the nearest positional parent in the hierarchy. And is rendered relative to the parent.