如何放置 z-index div？答案

【问题标题】：How to place a z-index div?如何放置 z-index div？
【发布时间】：2013-02-27 21:25:39
【问题描述】：

我有一个固定宽度为 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

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

【问题讨论】：

标签： html css position z-index

【解决方案1】：

#main {
    position:relative
}

应该做的伎俩。

【讨论】：

【解决方案2】：

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

}

position:relative 将使任何子元素相对于它定位自己，而不是 body。

barelyfitz.com 有一些关于“位置”如何发挥作用的体面示例

【讨论】：

【解决方案3】：

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

#main { position: relative }

【讨论】：