div overlapping with z-index

i'm stuck in a bit of a rut at the moment.

if you head over to my website...

http://dekkro.no-ip.org/

You will see an image, and a div underneath it. I have spent the past few hours trying to position these both in the mid开发者_如何学JAVAdle of the page, with the bottom div over lapping the image.

I have failed and failed, what am I doing wrong here? I have used z-index, and positioning but its never centered.

Thanks!

All you need is this:

CSS:

#my_img {
    margin:auto;
    display:block;
}

#my_div {
    margin:auto;
    position:relative;
    top:-100px;
    z-index:2;
}

HTML:

<img id="my_img" src="http://dekkro.no-ip.org/images/testimage.png" />
<div id="my_div">whatever</div>

Here's a demo: http://jsfiddle.net/tX2JY/embedded/result/

Wow, that's alot of code going on for that page.

Without reviewing everything yet (will in a bit) - have you tried setting the main image to be a background image of a div, and then simply putting the log in form inside it?

CSS

#image-div { background-image:url('yourimage.jpg'); }

HTML:

<div id="image-div">
    <div id="form-div">
    form...
    </div>
</div>

Lets say one div has width w1 and height h1 ; other w2 , h2

#div1 {
   position:absolute; top:50%; left:50%; margin-left: - w1/2px; margin-top:-h1/2px;
}

#div2 {
   position:absolute; top:50%; left:50%; margin-left: - w2/2px; 
   margin-top:-h2/2px; z-index:9999;
}