-1

I have two div-Tags, one contains the header with a logo and the other is an information div. The logo should always be on top, but it isn't.

On both I've set a z-index. The header has a z-index of 500, the info has a z-index of 200, as it should be unterneath the logo.

In CSS:

div#logo { position:fixed; z-index: 500;} 
div#markerInformation {position: absolute; z-index: 200;}

The result I get is the opposite, you can see that the logo is underneath the info:

Screenshot of ignored z-index

To see it in action, you can have a look here: http://www.dominikamon.com/location/#f4ec7efc-d27a-4767-910b-f1af9a5547a8,4,52.231789,21.006128

Note that the css definition of div#logo is:

div#logo {
position: absolute;
z-index: 500;
}

but as soon as you scroll down, there is a jQuery event bound to "scroll" that sets the position:fixed.

I already checked out some posts that should solve the issue, such as:

Maybe I missed the point in one of them, but i couldn't manage to get it working?

Community
  • 1
  • 1
DominikAmon
  • 892
  • 1
  • 14
  • 26
  • 1
    I'm still confused as in what is your desired output. Is it that you don't like the way it is done? or that you don't want the logo to be on top. What exactly do you need fixed? – LOTUSMS Mar 19 '14 at 16:32
  • _they recommend to use "position hover"_ ~ There is no such thing as `position hover`. https://developer.mozilla.org/en-US/docs/Web/CSS/position – Sparky Mar 19 '14 at 16:34
  • Also see: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index – Sparky Mar 19 '14 at 16:37
  • I'd like the logo to be fixed but OVER the infobox, so the logo should always be on the top – DominikAmon Mar 19 '14 at 16:50

1 Answers1

0

try this one

div#logo {
position: absolute !important;
z-index: 500;
}
Casper
  • 1,469
  • 10
  • 19