A Question of Margin

1

Help me with the concept of margin here. I assume the margin-top: 40px in the CSS applies to both divs. So I can see this for the Red div - there’s a 40px space between it and the upper border of the window of the browser. Should the Blue div not be at the same height as the Red div since the same margin rule applies to it as well?

<style>
    div {
      width: 60%;
      height: 200px;
      margin-top: 40px;
    }
  
    .first {
      background-color: red;
      position: absolute;
      z-index: 2
  
    }
    .second {
      background-color: blue;
      position: absolute;
      left: 40px;
      top: 50px;
      z-index: 1;
    }
  </style>
  
  <div class="first"></div>
  <div class="second"></div>
2

It would be if not for the top: 50px; you gave only to the second/blue div. This gets applied on top of the margin… heh, “on top”.

3

Ah - so the margin-top and the position-top are additive for the blue div thus pushing the top edge of the blue div 50px below the top edge of the red div - correct?

4

Almost. The blue and red divs don’t interact with each other because they’re both positioned absolutely. So no matter where the red div is, it doesn’t affect the blue div. What affects the blue div is the combination of the margin and the top: 40 + 50 = 90.

5

OK - so that is very clear now - thank you.
“Saving the world - one line of code at a time🙃”