html - 如何放置 z-index div？

Question

我有一个固定宽度为 960 像素的主包装器。在顶部和右手边有一个登录按钮。通过按下这个按钮，它将在主包装器的正下方和前面打开一个 div 层。因此我使用 z-index: 1. 问题是我不知道如何根据主包装器而不是浏览器窗口宽度设置固定位置。现在，当设置左/右位置时，div 将根据整个浏览器窗口的宽度放置。如果分辨率较大，则主包装由 0 auto 放置。

举个例子:

代码:

#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

如果有人可以告诉我如何解决这个问题，我将不胜感激。

Answer 1

#main {
    position:relative
}

应该可以解决问题。