KPC
Kevin Powell - Community•2d ago
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>
<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%);
}
*{
  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...
3 Replies
Wanderer (They / Them)
Wanderer (They / Them)OP•2d ago
nvm, I got answer after a lot back and forth convo with GitHub copilot. After some examples checking on VS Code, it finally conceded and revised itself that, "A grid container establishes the containing block for its absolutely positioned descendants, only when the grid uses positioned (relative, fixed, absolute, sticky) layout, preferably osition relative, or alternatively transform: translateZ(0); contain: paint; filter: blur(0); perspective: 1px; will-change: transform, etc."
Chris Bolson
Chris Bolson•2d ago
I had a go with Copilot on VS Code but ended up deactivating it after a couple of hours - it just got in the way and invariably got things wrong.
Kevin Powell
Kevin Powell•2d ago
Any time a new model comes out, I poke at it with some css related questions to see how it'll do, and in general, they're all terrible. The example you gave is pretty in-line with the fundamentals that they still get wrong. They make jumps like that all the time, and then you need to coax it to correct itself, but if you don't know how to coax it, it doesn't help at all, or sometimes it doubles down, or corrects itself by being even more wrong.

Did you find this page helpful?