Re: Proposal for overflow painting order

Tab Atkins Jr. wrote:
> On Thu, Feb 5, 2009 at 1:22 PM, Andrew Fedoniouk
> <news@terrainformatica.com> wrote:
>   
>> I think you've missed the point.
>>
>> position:relative is moving the element onto completely different stack
>> order.
>>
>> All position:relative elements will move it on *top* of canvas layer. No
>> matter what value of z-index it has.
>> Thus you cannot move positioned element underneath its static neighbors by
>> using z-index.
>>     
>
> You may want to try some examples yourself, because this is incorrect.
>  Giving an element position:relative, and nothing else, will indeed
> put it above its static neighbors by default.  However, a negative
> z-index on it will push it underneath its static neighbors.  There is
> interop on this.
>
>   
>> But style="margin: -10px 0" when applied to static element moves its top
>> side over its siblings [on canvas] and its bottom
>> underneath its siblings [that are on the canvas layer].  A bit strange
>> structure of space/time continuum if to speak about intuition.
>>     
>
> 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?

--
Andrew Fedoniouk.

http://terrainformatica.com

Received on Thursday, 5 February 2009 20:57:46 UTC