0

私の場合、div[DivFirst]を別のdiv[DivSecond]の中央に配置する必要があります。
そして、私は以下のように設定することによってそれをしましたcss、

#DivFirst
{
    width:500px;
    height:500px;
    position:relative;
}
#DivSecond
{
    position:absolute;
    width:200px;
    height:200px;
    top:50%;
    left:50%;
    margin-top:-100px;
    margin-left:-100px; 
}

その後、私が変更した理由によりDivSecond's position from absolute to relative、
結果としてdesignが折りたたまれました。つまり、DivFirst's heightが変更され、
内部div[ DivSecond]がcentered適切になりませんでした。

position absolute私はのために行くことができます、しかし私はこれがなぜ 起こっているのinner divかを知る必要があります。
ちなみに、私が何か間違ったことをしている場合は、親切に正しい道に私を導いてください。

[注： 内部divの絶対位置と相対位置の両方を設定してデモを実行します]

デモ

4

2 に答える 2

0

この場合、負のトップマージンはそれで#DivFirstを引っ張っています。#DivFirstにoverflow：autoを追加することで、この動作を停止できます。

関係するdivのサイズがわかっているので、負のマージンで所定の位置に移動しようとせずに、手動で配置することを検討することをお勧めしますhttp://jsfiddle.net/DDcfD/：

CSS：

#DivFirst
{
    width:500px;
    height:500px;
    position:relative;
    background-color:red;
}

#DivSecond
{
    position:relative;
    background-color:yellow;
    width:200px;
    height:200px;
    top:150px;
    left: 150px;
}
于 2013-03-03T10:50:47.703 に答える
0

これは、を指定する#DivSecond position: absolute;と、静的に配置されていない限り、最初に配置された祖先要素に対してターゲット要素を相対的に配置するためです。

#DivSecond positionプロパティに値を指定すると、そのプロパティrelativeをその祖先要素に対して相対的に配置するのではなく、デフォルトである通常の位置に対して相対的に配置します。つまり、この場合、leftの「上」に50％を追加します。通常の位置です。

ここで例を見ることができます。

于 2013-03-03T10:25:35.710 に答える