[css-grid] Absolutely positioned items and static position

Hi,

I have an extra question regarding absolutely positioned items and the
static position.

Again, let's use an example:
<style>
  .grid {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 50px 50px;
    position: relative;
  }

  .absolute {
    position: absolute;
    grid-row: 2 / 3;
    grid-column: 2 / 3;
  }

  .item {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
  }
</style>

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


Where the "absolute" element should be placed?
A) 100x50
B) 0x0

I guess the answer is A) as according to the spec [1]:
"The static-position containing block is the containing block of a
hypothetical box that would have been the first box of the element if
its specified 'position' value had been 'static' and its specified
'float' had been 'none'."

Because of if the position was "static" instead of "absolute", the
element would be placed at 2nd row and 2nd column (100x50).

Is it right?


And what would happen in the following case (considering a line height
of 20px)?

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

Where the "absolute" element should be placed?
A) 100x70
B) 100x50
C) 0x20
D) 0x0

In this case if the position is "static" instead of "absolute" the
element would be placed in C). But then it'd be ignoring the grid
placement properties so I'm not sure.

What's the right answer for this case?


Thanks for your time,
  Rego

[1] http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width

Received on Tuesday, 25 November 2014 23:22:33 UTC