Re: [css-grid] Overlapping elements & backgrounds

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.

~TJ

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