BinaryDevelop
  1. ホーム
  2. html

[解決済み] 絶対位置が機能しない

2022-01-25 01:21:44

質問

id 'absPos' の div を親 div に対して絶対位置で配置しようとしています。しかし、うまくいきません。divはページの左上隅に配置されています。

私のコードサンプルは以下の通りです。 

<html>
    <body>
        <div style="padding-left: 50px;">
            <div style="height: 100px">
                Some contents
            <div>

            <div style="height: 80px; padding-left: 20px;">
                <div id="absPos" style="padding: 10px; position: absolute; left: 0px; top: 0px; background-color: red;"></div>
                Some text
            </div>
        </div>
    </body>
</html>

この問題を解決するために私を助けることができますか？ 私の実際のケースでは、赤の背景色の代わりに、背景画像を配置する必要があります。

お問い合わせ

解決方法は？

絶対位置指定された要素は、その位置が offsetParent である最も近い祖先。 も配置されます。 . あなたのコードでは、どの祖先も "positioned"要素ではないので、div は body 要素からオフセットされており、その要素である offsetParent .

を適用することで解決します。 position:relative を親 div に追加すると、親 div は強制的に位置指定された要素になり、子 div の offsetParent . 

<html>
    <body>
        <div style="padding-left: 50px;">
            <div style="height: 100px">
                Some contents
            <div>

            <div style="height: 80px; padding-left: 20px; position: relative;">
                <div id="absPos" style="padding: 10px; position: absolute; left: 0px; top: 0px; background-color: red;"></div>
                Some text
            </div>
        </div>
    </body>
</html>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します