[lemonchicken]

Hi,

I'm wanting to place a floating nav over everything

the code here
is basically what I need but my site won't display it over the image

I've tried position:absolute in HTML & CSS, as well as using z-index but with no avail.

the menu here is what I'll be using but I need help in getting it to show above the image. So any tips or tricks you know of to do this are much appreciated..?

[EnvXOwner]

Here is an example of what you have to do:

.menu {
    position: fixed;
    top: 100px;
    left: 0px;
    z-index: 5;
}

Tell me if that works.

[lemonchicken]

thanks for the code unfortunately it still shows behind the image

any other ideas?


cheers

This post has been edited by lemonchicken: 30 June 2011 - 08:29 AM

[Slice]

you can also try:

.menu
{
   float: left;
   position: relative;
   z-index: 999;
   /* then all your height, width, borders etc. */
}

Then make sure the z-index of containers or anything else is set to below 999. Using relative and floats keeps the page flowing. Absolute positioning can be a pain to work with sometimes.

EDIT: oh and you will have to set the other divs to relative as well.

This post has been edited by Slice: 30 June 2011 - 08:31 AM

[EnvXOwner]

Alright, but aren't you also wanting the overlying div to scroll? That's what happens in the link in the tutorial you gave us.

This post has been edited by EnvXOwner: 30 June 2011 - 08:35 AM

[lemonchicken]

the pic still pushes the menu to underneath. really strange cos like you say, the other divs are relative.. I'll have another fiddle and report back. In the meantime, anything else that could work is appreciated :D

EnvXOwner, on 30 June 2011 - 04:35 PM, said:

Alright, but aren't you also wanting the overlying div to scroll? That's what happens in the link in the tutorial you gave us.

initially I only wanted it at a fixed position near the top. scrolling is fine cos I figure that code would work in a way better than any others at showing above the image..

This post has been edited by lemonchicken: 30 June 2011 - 08:40 AM

[EnvXOwner]

Is that background the image you're talking about? If it is set the image via CSS on the body like:

body {
    background-image: url('blahblah.png');
}

nvm. I just noticed that you're images cycled.

This post has been edited by EnvXOwner: 30 June 2011 - 08:41 AM

[lemonchicken]

Excellent, thank you EnvX I now have it working with your css