Why does adding position : absolute to this class have this effect?

Hi!

W3Schools.com/cssref/pr_class_position.asp says the effect of position : absolute is to position the element relative to its first positioned (not static) ancestor element. As far as I understand it, relative is an example of a non-static element.

From this, I would expect adding position : absolute to my .inner class would cause the two boxes to end up occupying the same space inside the outer box, which has position relative.

However, this hasn’t occurred and instead the whole screen is being filled, presumably because of the very same height : 100% and width : 100% that would make it fill the outer box is corresponding to the whole body. This can be observed on the codepen here.

Why is it behaving like this? Thanks

Edit : was a damn typo, missed it so many times lol. NVM.

HTML

<div class = "outer">
  <div class = "inner" id = "no1"></div>
  <div class = "inner"></div>
</div>
CSS

html, body {
  height : 100%;
}

.outer {
  posittion : relative;
  left :0;
  top : 0;
  border : solid;
  height : 50%;
  width : 50%;
  
}

#no1 {
  background : red;
}

.inner {
  height : 100%;
  width : 100%;
  border : solid;
}
1 Like