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

Re: [css-grid] Overlapping elements & backgrounds

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Thu, 18 Dec 2014 12:20:29 -0800
Message-ID: <CAAWBYDDiHbUXTGbptPgr2KpPigy0=1ukBtZUezenYFdR0vpd+A@mail.gmail.com>
To: Manuel Rego Casasnovas <rego@igalia.com>
Cc: www-style list <www-style@w3.org>
On Thu, Dec 18, 2014 at 12:12 PM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
> On Mon, Nov 3, 2014 at 5:01 AM, Manuel Rego Casasnovas <rego@igalia.com> wrote:
>> Probably I'm missing something but this is rendered the same than if you
>> just have a regular div with 10px width [1]:
>> <div style="width: 10px">
>>   <div style="padding: 20px; background-color: cyan;">B</div>
>> </div>
>> The cyan box is 40px width, so it's ignoring the "B" size. Exactly the
>> same that it's happing on grids.
>> Should this work in a different way for grids?
> Ah, indeed.  I just re-read Appendix E of CSS2.1, and this is the
> expected behavior.  For elements that aren't stacking contexts, all
> the backgrounds are drawn, then all the text is drawn.  Stupid
> unintuitive legacy behavior...

And I'm wrong once again.  Well, what I said was right, it just
doesn't apply to grid items.  Per
<http://dev.w3.org/csswg/css-grid/#z-order>, they render as
inline-blocks, which makes them paint atomically, like flex items do.
So if grid items overlap, the upper one should fully cover the lower
one, not interleave.

Received on Thursday, 18 December 2014 20:21:22 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:49 UTC