Absolutely positioned element is not "on top" of relatively positioned

Forum Moderators: not2easy

Message Too Old, No Replies

Absolutely positioned element is not "on top" of relatively positioned

Fotiman

7:39 pm on Apr 14, 2009 (gmt 0)

In the example below, I had expected the absolutely positioned element to cover the relatively positioned elements. It does cover items within the relatively positioned ancestor of this box, but not the ancestor's siblings which are relatively positioned, despite having a higher z-index. Can anyone explain why?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled</title>
<style type="text/css">
* { margin: 0; padding: 0; border: 0; }
li { position: relative; z-index: 1; }
div.box1 { 
  position: absolute; 
  z-index: 2; 
  top: 0; 
  height: 60px; 
  background: #ccc;
  color: #fff;
}
</style>
</head>
<body>
<ul>
  <li>*<div class="box1">Box 1111111111111111111111111111111111</div></li>
  <li>*<div class="box2">Box 2</div></li>
</ul>
</body>
</html>

Fotiman

8:54 pm on Apr 14, 2009 (gmt 0)

I believe the answer lies in the CSS Specification where z-index is covered:
[w3.org...]

This integer is the stack level of the generated box in the current stacking context.

The important part is in the current stacking context. In other words, because the list items are positioned relatively in my example, I have 2 separate stacking contexts, so the items in my first stacking context won't cover items in the other.

[edited by: Fotiman at 8:54 pm (utc) on April 14, 2009]