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

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:

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

...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:


           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

Received on Tuesday, 31 August 1999 13:34:10 UTC