How to place a z-index div?

Question

i have a main wrapper that has a fixed width of 960px. at the top and very right hand side there is a login button. by pressing this button it will be opened a div layer directly below and also in front of the main wrapper. therfor i use the z-index: 1. the problem is that i dont know how to set a fixed position depending from the main wrapper instead of the browser-window width. now when setting left/right- position the div will be placed depending from the whole browser-window width. the main wrapper is placed by 0 auto in case of a larger resolution.

to give an example:

code:

#main {
    width:300px;
    height: 500px;
    background-color: #f23;
    margin: 0 auto;
}
#zindex{
    font-size: 11px;
    width: 50px;
    height: 50px;
    background-color: #dedede;
    position: absolute;
    right: 0;--> will place the div depending from the browser window and not main
}

example

if there is someone who could tell me on how to solve this i really would appreciate.

Answer 1

#main {
    position:relative
}

Should do the trick.

Answer 2

#main {
    width:300px;
    height: 500px;
    background-color: #f23;
    margin: 0 auto;
    position: relative;

}

The position:relative will make any child elements position themselves relative to that, instead of the body.

There's some decent examples of how 'position' works over at barelyfitz.com