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


(Tantek: i do agree with you that the spec says z-index is only for
*positioned* elements, but as Ian says, i don't see why it cannot be applied
for static boxes which overlap due to negative margins.)

look at the following markup:

<body style="z-index=0; background-color=green;">

<p style="z-index=-1; position: relative; top: 50; left: 20">

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.

so the box for 'hello!!' would show up behind the box for 'world!!' but NOT
behind the box for BODY because BODY contains both P element boxes.

!!! please correct if i'm wrong on this, because if i am, i have to redo my
renderer so that it does not respect hierarchical boundaries, which is NOT a
happy situation.  !!!

the original intent of this thread (the question) can be attained by making
the 'z-index=-1' box a 'position: fixed' box (though the positioning
properties would be complex.)  this would work because fixed boxes break out
of the hierarchy where they are found and levitate to the viewport box,
essentially becoming a sibling to the BODY box.

-- ranjit

------Original Message------
From: "Tantek Celik" <>
To: Ian Hickson<>, Axel
Sent: August 30, 1999 3:17:00 AM GMT
Subject: Re: Q: z-index and the body element

>> I've got a question regarding the z-index property: Why can I still see
>> elements which I've put *behind* the BODY element (see example below)?
> Because your browser has a bug or doesn't support z-index.

Or the browser *doesn't* have a bug and is properly ignoring z-index on
non-positioned elements.

>> <BODY STYLE="z-index: 0; background-color: #456789;">
>> <P STYLE="z-index: -1; color: #fedcba;">This is a test showing a text
>> shouldn't be visible as it lies behind the body element <EM>("z-index"
>> property equals "-1").</EM>
>> </BODY>

In the example given, both elements which have a z-index *do not* have their
position property set, and since according to:

the z-index property "Applies to: positioned elements", the settings on the
z-index property are ignored.


FREE Email for ALL! Sign up at

Received on Monday, 30 August 1999 09:37:21 UTC