绝对位置不起作用

小编典典

绝对位置不起作用

css

我正在尝试将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>

您能帮我解决这个问题吗？在我的实际情况下，我必须放置背景图像，而不是红色背景色。

问候

阅读 264

2020-05-16

共1个答案

小编典典

绝对定位的元素从其offsetParent最近的祖先开始定位。在您的代码中，祖先都不是“定位”元素，因此div从body元素（即）偏移offsetParent。

解决方案是将其应用于position:relative父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>

2020-05-16