0

https://codepen.io/Chiz/pen/PoQMjmj

<div>
  <div class="card">Text</div>
<div class="card">Text2</div>
</div>

div.card
{
  width:200px;
  height:200px;
  background-color:pink;
  transition:all 0.7s;
  position:absolute;
}

Both of the child divs are block level elements, but when I set position:absolute to both of them without giving any values for top and left properties, both divs get stacked together in the same position.

Is this part of the CSS specs?

Xeon
  • 385
  • 3
  • 11
  • 2
    Because absolute position remove item from normal flow. From [mdn](https://developer.mozilla.org/en-US/docs/Web/CSS/position) : _It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block_ – Sfili_81 Jun 24 '22 at 10:02
  • 1
    @Sfili_81 - In this case, it's neither. Having no inset values, both elements are placed at their static position. But they take up no space in that normal flow. – Alohci Jun 24 '22 at 10:12
  • 1
    So both element automatically positioning on top:0; left:0; – Sfili_81 Jun 24 '22 at 10:17
  • @Sfili_81 - No, that's the point. They are positioned at `top:auto; left:auto`. Auto in this case will result in used values of `top:8px; left:8px` because of the default body margin. – Alohci Jun 24 '22 at 13:50
  • @Alohci yes you are right. :) – Sfili_81 Jun 24 '22 at 14:54

0 Answers0