html - z-index div を配置するには?

Question

固定幅 960px のメイン ラッパーがあります。右上にログインボタンがあります。このボタンを押すと、メイン ラッパーのすぐ下と前にある div レイヤーが開きます。そのため、z-index を使用します。 1. 問題は、ブラウザ ウィンドウの幅ではなく、メイン ラッパーに応じて固定位置を設定する方法がわからないことです。left/right-position を設定すると、ブラウザ ウィンドウ全体の幅に応じて 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
}

例

これを解決する方法を教えてくれる人がいれば、本当に感謝しています。

Answer 1

#main {
    position:relative
}

トリックを行う必要があります。

Answer 2

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

}

はposition:relative、 の代わりに、子要素をそれに対して相対的に配置しbodyます。

「位置」がどのように機能するかについてのいくつかの適切な例が、bararfitz.comにあります。

Answer 3

#main div の相対位置を指定するだけです。例えば：

#main { position: relative }