Z-index help?

HTML & CSS
1

I am having some real issues getting a z-index-based header to work.
I am not very familiar with using z-index so I’m sure I’m doing this wrong - if there is a better way to set this up please let me know - this can’t be right! :confused:

Basically: I need the nav tabs to be behind the scalloped banner. The logo, tagline and shopping cart module need to be on top of the banner obviously. Also, the site will expand horizontally (not my choice) so the cart module always needs to be 10px from the right. The tagline should not move.

The only way it seems I can get things to line up is with negative margins, and I know that’s not the right way to do it. I’m used to working with floats; but with the z-index it appears you can’t use floats. So, how can I get all these elements to stay in place without dropping below the banner div??

Here is my code:

<div id="header">
  <div id="banner">
  </div><!-- end banner -->

  <div id="logo">
    	<a href="/"><img src="images/logo.jpg" alt="sue sue sweets logo" align="texttop" /></a>
  </div><!--end logo-->
<div id="top-banner"><img style="float:left" src="images/tagline.png" width="522" height="53" alt="the crunch that cures your munch!" /><div id="cart"><p style="float:right"><a href="#">view cart</a> • <a href="#">check out</a></p>
</div><!--end cart-->
</div><!--end top-banner --><div class="clear"></div>
 <!-- <div id="cart">
  
    <p><a href="#">view cart</a> * <a href="#">check out</a></p>
    </div>-->
  <!--end cart -->

    
    <div id="topnav">
    	<ul id="topnav">
        	<li><a href="#"><img src="images/nav-story.gif" /></a></li>
            <li><a href="#"><img src="images/nav-snacks.gif" /></a></li>
            <li><a href="#"><img src="images/nav-reviews.gif" /></a></li>
            <li><a href="#"><img src="images/nav-visit.gif" /></a></li>
            <li><a href="#"><img src="images/nav-contact.gif" /></a></li>
            <li><a href="#"><img src="images/nav-policies.gif" /></a></li>
         </ul>

    </div><!-- end topnav -->
     
</div><div class="clear"></div><!-- end header -->

and here is my ill-fated css:

body {
	margin:0;
	padding:0;
	font-family:Arial, Helvetica, sans-serif;
}
div#header {
}

div#banner {
	position:absolute; 
	left:0px; 
	top:0px; 
	background-image:url(images/header.png); 
	background-repeat:repeat-x; 
	background-position:top; 
	z-index:1; 
	height:128px; 
	width:100%; 
	margin:0; 
	padding:0;
}
div#logo {
	width:100px;
	position:relative;
	margin:-2px 0 0 28px;
	z-index:2;
}

div#top-banner {
	z-index:3;
	position:absolute;
	top:5px;
	left:230px;
	width:710px;
}
div#top-banner img {
	margin:28px 20px 0 0;2
}

div#cart {
	width:160px; 
	float:right;
	background-image:url(images/cart-bg.png); 
	background-repeat:no-repeat; 
	background-position:top center;
	margin:0;
}
div#cart p {
	margin:7px 45px 8px 13px; 
	font-family:Arial, Helvetica, sans-serif; 
	font-size:11px;
}
div#cart p a {
	color:#000;
	text-decoration:none;
}
div#cart p a:hover {
	text-decoration:underline;
}
div#topnav {
	position:absolute;
	width:650px;
	z-index:0;
	left:300px;
	top:105px;
}
ul#topnav {
	padding:0;
	margin:0;
	color:#fff;
	list-style-type:none;
}
#topnav li {
	display:inline;
}
#topnav li a:hover{
	left:10px;
}

You can see the whole site in action here:
http://www.redkettledesign.com/dev/3/header.html

I really appreciate any help!

2

You’re doing it correctly. The only thing I’d suggest is that you don’t use AP (Absolute Positioning) for everything; use floats, margins, and paddings for it. To make sure z-index works, just set position:relative.

3

OH!! i had no idea you could use floats with position:relative.
duh

thank you! this makes my world much happier :smiley: