- 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
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 UTC