Re: [css-grid] Overlapping elements & backgrounds

On Thu, Dec 18, 2014 at 12:12 PM, Tab Atkins Jr. <> wrote:
> On Mon, Nov 3, 2014 at 5:01 AM, Manuel Rego Casasnovas <> 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
<>, 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