W3C home > Mailing lists > Public > www-style@w3.org > February 2009

Re: Proposal for overflow painting order

From: Andrew Fedoniouk <news@terrainformatica.com>
Date: Thu, 05 Feb 2009 12:57:00 -0800
Message-ID: <498B529C.9060207@terrainformatica.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
CC: benjo316@gmail.com, "www-style@w3.org List" <www-style@w3.org>, David Hyatt <hyatt@apple.com>

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 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:16 GMT