Re: Proposal for overflow painting order

Tab Atkins Jr. wrote:
> On Thu, Feb 5, 2009 at 2:57 PM, Andrew Fedoniouk
> <news@terrainformatica.com> wrote:
>   
>> Tab Atkins Jr. wrote:
>>     
>>> This makes complete sense.  Elements later in the document order are
>>> later in the paint order as well.
>>>       
>> Try this:
>>
>> <html>
>> <head>
>>  <style>
>>   .layer div { width:100px; height:100px; }
>>   .layer div.principal { margin:-10px 0; width:110px; }
>>   .layer div:hover { background:gold !important; }
>>  </style> </head>
>> <body>
>>
>>  <div class="layer">
>>   <div class="static" style="background:red">Red</div>
>>   <div class="principal" style="opacity:0.5; background:blue">Blue</div>
>>   <div class="static" style="background:green">Green</div>
>>  </div>
>>  <hr/>
>>  <div class="layer">
>>   <div class="static" style="background:red">Red</div>
>>   <div class="principal" style="background:blue">Blue</div>
>>   <div class="static" style="background:green">Green</div>
>>  </div>
>>
>> </body>
>> </html>
>>
>> Which rendering on these two div.layer's is more intuitive?
>>     
>
> Personally?  The second.
>
> But as you said before, people can disagree about what's the most intuitive.
>
> My point is that the 'normal' rendering (document order maps to paint
> order) isn't *un*intuitive, it provides an effect that can't be easily
> replicated in any other way, and the alternatives *can* be easily
> replicated through other methods.
>
>   
Here is one more sample for you. This time it demonstrates that 
position: non-static is not an option in some cases.
As I said positioning moves elements on separate stacking context where 
you easily can lost  the order
of drawing:

<html>
<head>
  <style>
    .layer div { width:100px; height:100px; }
    .layer div.principal { z-index:-1; position:relative; margin:-10px 
0; width:110px; }
    .layer div:hover { background:gold !important; }
    .aside { position:fixed; left:70px; top:0; bottom:0; width:10px; 
background:magenta; z-index:-1;}
  </style> 
</head>
<body>
 
  <div class="layer">
    <div class="static" style="background:red">Red</div>
    <div class="principal" style="background:blue">Blue</div>
    <div class="static" style="background:green">Green</div>
  </div>
  <div class="aside" >.</div>
</body>
</html>

In this example I just wanted to put ".layer div.principal" element
behind its siblings. Intuitive solution for me is to use negative margins.
But if I will start playing with z-indexes and positioning then the 
problem expands
to the interaction with the whole DOM tree.

And about previous example: do you have an idea why opacity changes the 
element
position in rendering stack? What should intuition tell us there?:)

-- 
Andrew Fedoniouk.

http://terrainformatica.com

Received on Thursday, 5 February 2009 21:41:46 UTC