The difference between absolute and relative positioning in CSS

In CSS, there are two main ways to position elements on a web page: absolute positioning and relative positioning. The key difference between the two is how they are positioned in relation to other elements on the page.

Absolute positioning is used to position an element relative to its nearest positioned ancestor, rather than the viewport, or the initial containing block. But if there is no positioned ancestor, it will default to be positioned relative to the initial containing block (viewport). Once an element has been absolutely positioned, it is removed from the normal flow of the document and does not affect the position of any other elements.

For example, consider the following HTML:

<div id="container">
  <div id="box1"></div>
  <div id="box2"></div>
</div>

And CSS:

#container {
  position: relative;
  width: 100%;
  height: 100%;
}

#box1 {
  position: absolute;
  top: 10px;
  left: 20px;
  width: 50px;
  height: 50px;
  background-color: red;
}

#box2 {
  position: absolute;
  top: 40px;
  left: 60px;
  width: 50px;
  height: 50px;
  background-color: blue;
}

In this example, both #box1 and #box2 are positioned absolutely with respect to the #container. The first box is positioned 10px from the top and 20px from the left, while the second box is positioned 40px from the top and 60px from the left.

On the other hand, relative positioning is used to position an element relative to its default position in the normal flow of the document. When an element is relatively positioned, it does not affect the position of any other elements, but it still takes up space in the normal flow of the document.

For example, consider the following HTML:

<div id="box1"></div>
<div id="box2"></div>

And CSS:

#box1 {
  position: relative;
  top: 10px;
  left: 20px;
  width: 50px;
  height: 50px;
  background-color: red;
}

#box2 {
  position: relative;
  top: 40px;
  left: 60px;
  width: 50px;
  height: 50px;
  background-color: blue;
}

In this example, both #box1 and #box2 are positioned relatively with respect to the default position of the elements. The first box is positioned 10px down and 20px to the right, while the second box is positioned 40px down and 60px to the right.

To sum up, the key difference between absolute and relative positioning is that absolute positioning positions an element relative to its nearest positioned ancestor or to the initial containing block while relative positioning positions an element relative to its default position in the normal flow of the document. And also, absolute positioning elements are removed from the normal flow while relative positioning elements still take up space in the normal flow.