• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 175
  • Last Modified:

Why is my #content div not appearing on top of my img?

Hi, I gave my #content div a z-index of 500 and my image with the class of .wood an z-index of -1 so that the content would slide up and appear to overlap it.  But its not working. . any suggestions?

http://gowiththemaster.com/tleithoff/index2.php

Also, the .wood img is appearing under my #nav div so I'm not sure why it won't appear under the #content div too. . .
0
FairyBusiness
Asked:
FairyBusiness
  • 3
1 Solution
 
gavsmithCommented:
z-index is its position on the z axis, as in on top of each other. content would be on top of .wood if they overlapped in terms of x/y.

content is using relative positioning so try adding:

top:-20px;

to your content class.

your nav is over already because your using float:right which takes it out of the flow of the rest of the page.

hope that helps
0
 
gavsmithCommented:
I was looking at the wrong nav:

#navigation if floating over the main image because of float:right;

#nav is over .wood correctly because its using position:absolute;

sorry for the confusion
0
 
jonahzonaCommented:
I tried what gavsmith recommended but it didn't seem to do what it sounds like you were asking for.

Try this:

The CSS for the #content currently is

#content {
    background: none repeat scroll 0 0 #343434;
    margin-left: auto;
    margin-right: auto;
    padding: 15px 0 0;
    position: relative;
    width: 770px;
    z-index: 500;
}

Open in new window


If you make it

#content {
    background: none repeat scroll 0 0 #343434;
    margin-left: auto;
    margin-right: auto;
    padding: 15px 0 0;
    position: relative;
    width: 770px;
    z-index: 500;
    margin-top: -50px; 
}

Open in new window


Which is similar to what gavsmith said in his first post, but an extra 30px, you end up with this:

 Screenshot
Also, the page is now 404ing. Did you move or change the name?
0
 
FairyBusinessAuthor Commented:
Thanks!
0
 
gavsmithCommented:
Didn't even get an assist because I didn't get the PX right!! lol I was showing how to move it up, I'm sure you could have worked out 'how much by', by yourself...
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now