Question

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

举个例子：

代码：

#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
}

应该做的伎俩。

Answer 2

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

}

position:relative会使任何子元素相对于此而不是body。

有一些关于“位置”如何在barelyfitz.com

上工作的体面示例

Answer 3

你只需要给#main div的位置相对。例如：

#main { position: relative }

如何放置z-index div？

3 个答案: