Kevin Powell - CommunityKP-C
Kevin Powell - Community•5mo ago•
3 replies
Wanderer (They / Them)

Is grid container the containing block of absolutely positioned child, without non static position

I am having some confusion between whether a grid container is naturally the containing block of its absolutely positioned grid children, even when the grid container is positioned statically, or whether you explicitly need to declare position on the grid as relative, to make it the containing block of its absolutely positioned grid children?

I checked with the example from this article: https://dev.to/nicm42/using-position-absolute-in-a-grid-1apg ,

HTML-

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="absolute"></div>
</div>


CSS - 

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
}

.grid {
  width: 100%;
  height: 100%;
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(3, 33vw);
  grid-template-row: repeat(3, 33vh);
}

.grid > div:nth-of-type(odd) {
  background-color: pink;
}

.grid > div:nth-of-type(even):not(.absolute) {
  background-color: steelblue;
}

.absolute {
  background-color: yellow;
  width: 33vw;
  height: 33vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


and am finding that without explicitly declaring the grid container to be positioned relative, its not containing its absolutely positioned children.

But GitHub copilot AI is constantly saying that - "A grid container establishes the containing block for absolutely positioned descendants, even when position is static. Offsets like top/right/bottom/left are resolved against the grid container’s padding box."

I also checked with some examples given by GPT 5 on GitHub, and all of them are sending me message that just like flex containers, grid containers are not the containing blocks of their absolutely positioned children.

So I am very confused now.
DEV Community
Using position absolute in a grid
This is a cool thing I saw on Kevin Powell's YouTube channel, and then actually used! The cool thing...
Using position absolute in a grid
Was this page helpful?