W3C home > Mailing lists > Public > www-style@w3.org > August 1999

RE: Re: Q: z-index and the body element

From: Ian Hickson <py8ieh@bath.ac.uk>
Date: Tue, 31 Aug 1999 18:34:07 +0100 (BST)
To: Ranjit Singhe <ranjit_singhe@mail.com>
cc: www-style@w3.org
Message-ID: <Pine.GSO.4.04.9908311808500.7314-100000@mary.bath.ac.uk>
On Mon, 30 Aug 1999, Ranjit Singhe wrote:

> ------
> <body style="z-index=0; background-color=green;">
>
> <p style="z-index=-1; position: relative; top: 50; left: 20">
> hello!!
> </p>
> <p>
> world!!
> </p>
> </body>
> -------

The CSS here is not very valid.

However, lets take this:

   <div>
      <p> Hello </p>
      <p> World </p>
   </div>

...with this CSS:

   div { background: green; position: relative; z-index: 5; }
   p + p { position: absolute; z-index: -1; }

Here, as I take it, the "World" should be under the <div>, and thus
invisible. The z-order would look like this:

              viewport
                 /
                /
              |/_ 

           Hello          First <p> element, 
       +---------+
      /         /       The <div> with its opaque background,
     +---------+  
       World          The second <p> element.


The <div> creates a local stacking context in which the Hello, the
World and the <div> take part. In this stacking context, the <div> has
a z-index of 0 (yes, 0, not 5: it has a z-index of 5 in its parent
stacking context (in this case probably the root element's)); the
Hello has no particular z-index (it is not positioned), and so appears
on the <div>; and the World has a z-index of less that the <div> (-1),
and so appears _below_ the <div>.


> P is a child of BODY, and according the CSS2 spec (my reading,
> anyway :) z-indexing of an element is relative only to sibling
> elements, and not to parent elements. this has to do with the
> creation of a z-index contexts.

z-indexing has only relevance to stacking contexts, and parents and
siblings must be part of the same stacking context. Reread section 9.9
of CSS2 for more details.

--
Ian Hickson
: Is your JavaScript ready for Nav5 and IE5?
: Get the latest JavaScript client sniffer at
: http://developer.netscape.com/docs/examples/javascript/browser_type.html
Received on Tuesday, 31 August 1999 13:34:10 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:00 GMT