CODEWITHSUNDEEP
htmlcss
user2710234
user2710234

Reputation: 3225

css header not displaying above menu

i have this css for my header:

and below the header i have a horizontal menu

.header {
    height:180px;
    margin-top:0;
    border-top:5px #999999 solid;
    background:#FFFFFF;
    position:fixed;
    z-index:-9999;
}

the image in the HTML isnt showing - i think its behind the menu and i cant get it above the menu:

ive created a jsFiddle so you can see the full HTML and menu CSS too: http://jsfiddle.net/ar9P6/

Upvotes: 1

Views: 148

Answers (2)

Pevara
Pevara

Reputation: 14310

since your header is positioned fixed, it is lifted out of the flow of the document. Therefore it is no longer 'pushing' the nav down, and the nav will appear on top of it as you noticed.

I would suggest you push your nav down by the same amount of pixels as the height of your header. Something like this:

.vertical-nav {
   margin-top: 180px;
}

Here is your updated fiddle: http://jsfiddle.net/ar9P6/9/

Upvotes: 2

putvande
putvande

Reputation: 15213

Remove the position:fixed from your .header or change the z-index to 0 or more.

Upvotes: 0

Related Questions