2

外側の緑色のボックスと内側の青いボックスの 2 つの要素を持つ非常に基本的なページがあります。内側のボックスに右の属性を設定すると左に移動する理由がわかりません。さらにright:0、ボックスの右端を親ボックスの右端に揃えないのはなぜですか? ここに私の短い例のページがあります...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <style type="text/css">
            #outer {
                background-color : green;
                width : 500px;
                height : 500px;
            }

            #inner {
                position : relative;
                background-color : blue;
                height : 400px;
                width : 400px;
                top : 10px;
                right : 20px;
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <div id="inner">


            </div>

        </div>
    </body>
</html>
4

4 に答える 4

4

プロパティを設定するrightと、要素が右端からどれだけ離れているかが示されます。新しい原点を設定すると考えてください。デフォルトでは、元は含まれている要素の左上です。とを使用bottomして、rightこれを変更できます。

要素が相対的に配置されている場合、その右原点はその右端の自然な位置になります。これが、要素が左に 20px シフトされる理由です。位置の値を に変更した場合absolute、新しい原点は、最も近くに配置されたコンテナの右端、またはビューポート自体になります。あなたの場合、それはビューポートです。

詳細については、http://www.w3.org/wiki/CSS/Properties/rightを参照してください。

于 2012-04-10T03:00:13.197 に答える
1

さらにright:0、ボックスの右端を親ボックスの右端に揃えないのはなぜですか?

すべての子孫に対して新しい座標系を確立する場合は、親ボックスをposition:relative(またはabsolute、または)に設定する必要があります。fixedそれ以外の場合、内側のボックスはまだ本体に対して配置されています。

たとえば、次の 2 つのデモを比較して
position:relativeください
position:static。

于 2012-04-10T03:06:13.997 に答える
1

投げ入れる

float:right;

あなたの内側のdivに追加すると、すべてが期待どおりに機能します。

于 2012-04-10T03:01:30.777 に答える
0

右に設定すると、右からどれだけ押したいかです

于 2012-04-10T03:02:07.467 に答える