z-index

Hello,

I'm not sure I understand how the z-index works.

In this example:

<style type="text/css">
      em {
 position: absolute;
 left: 100px;
 top:100px;
 z-index: auto;
      }
</style>

<body>

<p>
First <em>Absolute</em> First
</p>

<p>
Second paragraph
</p>

</body>

In all tested browers, the <em>Absolute</em> overlaps the text in the second
paragraph, okay.. the two paragraphs each create a block box.

The <em> in the first paragraph, doesn't it create a box that is a child of
the first paragraph?  I thought that the z-index specified in what order to
draw sibling elements, but apparently it doesn't? And if you treat the
box-model as a tree of boxes and you draw all boxes recursively? and if <em>
is a child of the first <p> then the <em> wouldn't overlap the second <p>..
Can someone explain to me the relationship between the boxmodel and the
z-index property? I've read "CSS2 9.9 Layered presentation" and I still
don't understand it.

thanks,

--
Sigurd Lerstad

Received on Thursday, 18 July 2002 22:31:40 UTC