1

Thanks to past questions I understood top: -50% has no effect for the innermost div in the following example because an explicit height is not set in the parent element.

What I'm curious is why left: -50% does work even though I did not set an explicit width.

/* Positioning */

.a {
  position: relative;
}

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

.c {
  position: relative;
  top: -50%;
  left: -50%;
}


/* Visuals */

.a {
  background-color: lightpink;
  padding: 1rem;
  height: 10rem;
  margin: 4rem;
}

.b {
  background-color: lightgreen;
}

.c {
  background-color: lightblue;
  padding: 1rem;
}
<div class="a">
  <div class="b">
    <div class="c">
      <p>Some Text</p>
    </div>
  </div>
</div>
Scorbie
  • 21
  • 1
  • 2

0 Answers0