Please help with a (relatively?) simple z-index issue

the #wrapper has a z-index value of 100, the #centerLogo has a z-index of 200. the z-index item overlays correctly…but…it pushes everything down and leaves a gap between the top nav and body images. the push/gap seems to be equal to the height of the object. my goal is to get the blue box centered on the red “crosshairs.”

this is most likely an easy/obvious fix, but i’m still in the hit or miss stage with the z-index property so any direction is greatly appreciated. :slight_smile:

code is below, pic is attached.

thanks!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif; 
background: gray; 
margin: 0; 
padding: 0; 
text-align: center; 
color: #000000;
}

#wrapper {
z-index:100; 
width:960px; 
background:white; 
margin:0 auto; 
border:1px solid #000000; 
text-align:left;
}

/*overlay objects*/

#centerLogo {
z-index:200; 
position:relative; 
top:300px; 
padding: 5px; 
margin-left:auto; 
margin-right:auto; 
height:110px; 
width:320px; 
background-color:#002A5C;}

/*page sections*/

#topNav {
width:100%; 
height:25px; 
border-bottom:1px solid blue;
}

#footerNav {
clear:both; 
width:100%; 
height:125px; 
border-top:1px solid blue; 
background-color:orange;
}

#left {width:479px; float:left;}
#right {width:480px; float:left; border-left:1px solid red;}

/*background objects*/

#commPic {
text-align:right; 
border-bottom:1px solid red; 
background-image:url(office-building-481x300.jpg); 
background-repeat:no-repeat; 
width:340px; 
height:160px; 
padding-top: 140px; 
padding-right: 140px;
}

#assetPic {
border-bottom:1px solid red; 
background-image:url(office-building-481x300.jpg); 
background-repeat:no-repeat; 
width:340px; 
height:160px; 
padding-top: 140px; 
padding-left: 140px;
}

#mgmntPic {
text-align:right; 
background-image:url(office-building-481x300.jpg); 
background-repeat:no-repeat; 
width:340px; 
height:160px;  
padding-top: 140px; 
padding-right: 140px;
}

#propPic {
background-image:url(office-building-481x300.jpg); 
background-repeat:no-repeat; 
width:340px; 
height:160px;  
padding-top: 140px; 
padding-left: 140px;
}

.sectTitle {width: 100px; margin:4px 8px; background-color:#CCCCCC; border:1px solid black;}

-->
</style></head>

<body>

<div id="wrapper">
  <div id="topNav">Content for  id "topNav" Goes Here<!-- /topNav --></div>
   <div id="centerLogo">315x106 logo goes here<!-- /centerLogo --></div> 
 <div id="left">
    <div id="commPic"><span class="sectTitle">&nbsp;COMMERCIAL&nbsp;REAL&nbsp;ESTATE&nbsp;</span><!-- /propPic --></div>
    <div id="mgmntPic"><span class="sectTitle">&nbsp;PROPERTY&nbsp;MANAGEMENT&nbsp;</span><!-- /propPic --></div><!-- /left --></div>
    <div id="right">    
    <div id="assetPic"><span class="sectTitle">&nbsp;ASSET&nbsp;STRATEGIES&nbsp;</span><!-- /propPic --></div>
    <div id="propPic"><span class="sectTitle">&nbsp;FEATURED&nbsp;PROPERTIES&nbsp;</span><!-- /propPic --></div><!-- /right --></div>
  <div id="footerNav">Content for  id "footerNav" Goes Here<!-- /footerNav --></div>
<!-- /wrapper --></div>

</body>
</html>

oh the pun in this case is exquisite!
RELATIVELY

the elements are pushing each other down and leaving a gap because thats what relative positioning does. Think of it this way the element is actually still where it would have been, w/o RP… RP merely moves the image of the element relatively to that insertion point. so the gaps that you are seeing is the space where the element would have been ( or actually where it IS… but the space is left black because you are displaying at distance realtive to theta space…see?) And since the element is STILL THERE, in the normal flow, it pushing other elements about.

you may want to reconsider your mark up and use position: absolute for thsoe particular elements.

haha, thanks for pointing out the pun. i know the solution is something simple, but i just don’t use the property enough to have learnt all the kinks.

i tried it with absolute and it still didn’t work…can’t really recall what happened though, as it was getting quite late and i had been working on the page for hours trying to get those section titles in place over the structure images. (i finally switched them to background images and used padding for positioning the text in the divs.)

another thing i tried was fixed positioning with a pixel count top positioning and auto margins (it centers horizontally), which made it disappear all together.

so, if i am using absolute should i just put it in first thing after opening the wrapper? i’m at a different 'puter right now so can’t test that before asking.

thanks again. :slight_smile:

Set position:relative on #wrapper as a stcking context for the absolutely placed logo and then place it like this:


#wrapper {
    z-index:100;
    width:960px;
    background:white;
    margin:0 auto;
    border:1px solid #000000;
    text-align:left;
  [B]  position:relative;[/B]
}
/*overlay objects*/

#centerLogo {
    z-index:200;
   [B] position:absolute;
    top:270px;
    left:320px;[/B]
    padding: 5px;
    height:110px;
    width:320px;
    background-color:#002A5C;
}


Those blocks are really headings so I would have marked them like so:


<h3 id="commPic"><span class="sectTitle">&nbsp;COMMERCIAL&nbsp;REAL&nbsp;ESTATE&nbsp;</span></h3>

(Assuming that h3 is at the correct level. If they are not headings then a p would have been a better element than a div.)
I’d also use text-transform:uppercase and white-space:nowrap instead of shouting.:slight_smile:

Paul beat me to it, as usual. but anytime you use AP is is wise to have used at least one RP on an ancestor. The coordinates will be calculated based on the tag with the RP.