web-dev-qa-db-ja.com

絶対位置が機能していません

親divに対して絶対位置にid'absPos 'の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>

この問題を解決するのを手伝ってくれませんか。私の実際のケースでは、赤い背景色の代わりに背景画像を配置する必要があります。

よろしく

htmlcsscss-position
15
Ram

絶対配置の要素は、最も近い祖先であるoffsetParentから配置されます これも配置されます 。コードでは、どの祖先も「配置された」要素ではないため、divはbody要素（offsetParent）からオフセットされています。

解決策は、position:relativeを親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>
32
Andy E

絶対位置の要素を配置する場合は、基本要素にデフォルト値以外の位置値を設定する必要があります。

あなたの場合、親divの位置の値を「relative」に変更すると、問題を修正できます。

6
Arun P Johny

親divをposition: relativeまたはposition: absolute自体で宣言する必要があります。

relativeは、この場合に探しているものです。

3
Pekka 웃

最初に親divrelativeの位置を指定する必要があります。

<div style="height: 80px; padding-left: 20px; position:relative;">
2
Sarfraz

親DivにPosition：absoluteを適用することもできます。以下の合計コード

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

            <div style="height: 80px;position:absolute; 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>
1
Rajasekar

私のように、ある要素を別の要素の上に配置しようとした場合、フローティング要素は兄弟としてではなく、他の要素の内側にある必要があります。今あなたのposition:absolute; 働ける！

0
Mike GB