Topic: z-index and positioning question

I have a page with a pretty simple layout already done.  What I'd like to do now is overlay some content over this layout without affecting the underlying "real" content.

I guess I'm pretty close but there is one wrinkle, maybe someone can help.

The "real content" lives inside a "containter" div that uses the following css:

padding: 0;
  border: 0;
  position: static;
  margin: 0 auto 0 auto;
  width: 1000px;
  background: transparent;

That basically "centers" the content when the user changes the width of the window.  It's a nice and standard effect.

Now in order to get the "overlay" working I use the following css:

z-index: 10;
  position: absolute;
  margin: 20px auto 0 auto; /* note: the auto's don't achieve centering here */
  left: -30px;              /* just some poisitioning for the image content... */
  width: 1000px;            /* I guess this is irrelevant given the margin stuff doesn't do much */

It seems to get the "overlay working" the 2 important components are: z-index: 10; and position: absolute.

But the minute I say "position: absolute", I can't get the same "page centering" working, which is a bummer because I want this "overlay" to track the underlying content.

Edit: I got it working, so the quoted website below doesn't show the problem anymore
A picture is 1,000 words.  Here is the website example: next.wulfram.com

Thanks for listening!

Last edited by Slurpy (2007-02-14 18:46:33)

Re: z-index and positioning question

Ok, so this is an ie6 issue to do with relative positioning and z-values. 

Here is the deal:  Anytime you want to have a relatively positioned div on an overlaying layer via z-index, you need to employ the following pattern.  I'm inlining the CSS, just to be clear...

<body>

<!-- the next 2 divs are required to float something relatively vs. absoluteley in ie6 -->

<div style="z-index:2; position: relative; margin: 20px auto 0 auto; width: 1000px;">
<div style="z-index:2; position: absolute; top: 0px; left: 0px; width:132px; height: 58px;
Hey look!  It's a div that's really floating over other divs in the document, and it's centered too!
</div>

<!-- the rest of the normal document can go here -->

<!-- the next div would be the "container div" -->
<div style="z-index:1; position: relative; margin: 20px auto 0 auto; width: 1000px;">
Great website here...
</div>
</body>