Re: [css3-flexbox] Painting order

Anton Prowse <prowse@moonhenge.net> writes:

> On 20/07/2012 09:35, Morten Stenshorne wrote:
>> "Tab Atkins Jr." <jackalmage@gmail.com> writes (Wed, 27 Jun 2012 09:10:47 -0700):
>>
>>> On Wed, Jun 27, 2012 at 6:34 AM, Morten Stenshorne <mstensho@opera.com> wrote:
>>>> Morten Stenshorne <mstensho@opera.com> writes:
>>>>> "Tab Atkins Jr." <jackalmage@gmail.com> writes:
>>>>>> On Mon, Jun 25, 2012 at 1:35 AM, Morten Stenshorne <mstensho@opera.com> wrote:
>>>>>>> fantasai <fantasai.lists@inkedblade.net> writes (in "[CSSWG] Minutes and Resolutions 2012-06-20"):
>>>>>>>>    - RESOLVED: order affects painting order
>>>>>>>
>>>>>>> Will 'flex-direction' and 'align-content' also affect painting order
>>>>>>> then?
>>>>>>
>>>>>> No, neither have any effect on painting order.
>>>>>
>>>>> Makes sense. Can you update the spec?
>>>>
>>>> But then again I can't really say I'm convinced that it's a good thing
>>>> that 'order' affects painting order at all.
>>>>
>>>>     <div style="display:flex;">
>>>>       <div id="a" style="order:3;">a</div>
>>>>       <div id="b" style="position:relative; order:2;">b</div>
>>>>       <div id="c" style="position:relative;">c</div>
>>>>       <div id="d" style="position:relative; z-index:-1; order:4;">d</div>
>>>>     </div>
>>>>
>>>> Painting order will here be d-a-c-b? So we have two levels of paint
>>>> ordering? Isn't this just confusing?
>>>
>>> Yes, that's the right painting order.  This correctly matches the
>>> visual order, as if you had written it in the order c-b-a-d.
>>>
>>>> (doesn't sound very pleasant to implement, either)
>>>
>>> It was trivial on our side, as we make 'order' literally reorder the
>>> box tree (iiuc).
>>
>> What about this one:
>>
>>    <div style="display:flex;">
>>      <div id="item1" style="position:relative; order:1; margin-left:-5px; border:2px solid blue; background:lime;">
>>        xxx
>>        <div id="abspos" style="position:absolute; margin-top:-5px; border:2px solid violet; background:cyan;">
>> 	yyy
>>        </div>
>>      </div>
>>      <div id="item2" style="position:relative; margin-left:-5px; border:2px solid red; background:yellow;">
>>        zzz
>>      </div>
>>    </div>
>>
>> Three positioned elements. One stacking context. In what order are they
>> painted?
>
> You treat order as if it literally reorders the box tree.  So your
> putting order:1 on item1 (which is already in the first position)
> achieves nothing whatsoever,

???

Initial value of 'order' is 0, so reordering will certainly occur.

-- 
---- Morten Stenshorne, developer, Opera Software ASA ----
---- Office: +47 23692400 ------ Mobile: +47 93440112 ----
------------------ http://www.opera.com/ -----------------

Received on Friday, 20 July 2012 09:14:11 UTC