Question

I’m working on my site’s Top Header Bar styles. I’m positioning 2 DIVs inside the Header DIV.
One Div is on top, while the other is on the bottom.
The top is dedicated to the Left Logo with Links on the Right, while the bottom Div is dedicated to a horizontal menu (which I’ll finish later on).

My problem arises with the Logo’s position. My logo is slightly taller than the top Div, and this causes the bottom Div to simply cover the bottom of my logo. If I crop or resize the logo, problem solved. But I don’t want to do that. I would like to make the Logo on a higher z-index. But it’s not working. Seems the z-index is ignored.

Here’s what I have so far:

<div id="siteHeader">

   <div id="headernav-top" style="height:50px;">
    <div id="headerlogo" style="height:72px;background-image:url('logo.jpg');background-repeat:no-repeat;">
    </div>
    <span id="headertext">  
        Welcome Back, <b>Whomever you are</b> | 
        <a href="/">My Account</a> | 
        <a href="/logout.php">Log Off</a> <br />
    </span>
  </div>

  <div id="headernav-bottom" style="height:39px;background-color:#0C6;">

    More Nav will go here

  </div>
</div> <!-- end siteHeader -->

The headernav-bottom is definitely covering the bottom of the 72px height logo, in the headerlogo div.

And when I put z-index inside both divs, it seems to be ignored.

Is there another way to get the headerlogo to settle above within the siteHeader div?

Answer 1

Seems you already found the answer aaaaand this is the reason why that’s the case: z-index is ignored for statically positioned elements (the default). z-index only takes effect if it is applied to a positon:relative, positon:absolute, or positon:fixed element.

Adding a non-static position attribute is a common way to force desired stacking of elements. Which one you use is also important:

position: relative
This will allow your element to retain its flow in the document. Using this one will keep the other elements from collapsing into the area that the element would have taken up as a static element.

position: absolute
This takes the element out of flow. Opposite of relative, this will give it an effective size of 0px by 0px in the document. Other elements will then collapse into the area this element would have occupied otherwise. (Note that this will sometimes make these elements hidden behind your absolute element.)

positon: fixed
Same as absolute. Out of flow, but with this one, the element is relative to the window and not the first non-static parent. (only important if you are positioning with top, right, bottom, and left) It will also appear to “stick” to the window as you scroll.

For your purposes, position:relative with no positioning attributes is probably best.