W3C home > Mailing lists > Public > www-style@w3.org > November 2014

Re: [css-grid] Absolutely positioned items and static position

From: Manuel Rego Casasnovas <rego@igalia.com>
Date: Wed, 26 Nov 2014 23:07:29 +0100
Message-ID: <54764F21.8080203@igalia.com>
To: www-style@w3.org
On 26/11/14 19:52, Tab Atkins Jr. wrote:
> Ooh, we don't really specify the static position of absposes with grid
> container parents.  Hmm.  Yeah, I guess that (A) falls out of the
> definition, and is consistent with our answer if you specify offsets.

So trying to be more explicit. Imagine the following grid:
  .grid {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 50px 50px;
    position: relative;
    padding: 15px;
    width: 500px;
    height: 500px;

  .absolute {
    position: absolute;
    width: 100%;
    height: 100%;

  .offset {
    left: 0;
    top: 0;

  .area {
    grid-row: 2 / 3;
    grid-column: 2 / 3;

  .span {
    grid-row: span 2;
    grid-column: span 2;

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

The positions and sizes of the #item depending on the class would be:
* class "absolute" position 15x15 size 530x530.
* class "absolute offset" position 0x0 size 530x530.
* class "absolute area" position 115x65 size 100x50.
* class "absolute offset area" position 115x65 size 100x50.
* class "absolute span" position 15x15 size 530x530.
* class "absolute offset span" position 0x0 size 530x530.

I've doubts regarding "span" class, because of if the element has
"position: static" it will take 2 rows and 2 columns (200x100), if the
grid is empty (basically following the placement algorithm).
However, IMHO we should probably ignore that information, as it'd force
us to run the placement algorithm for absolutely positioned elements
too, and it doesn't seem like something we want to take care at this
point. Thus, consider grid-row/column like "auto" in this case.

What do you think?

Received on Wednesday, 26 November 2014 22:08:02 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:26 UTC