Question

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

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

此致

Answer 1

具有绝对定位的元素位于offsetParent，即最近的祖先also positioned。在您的代码中，没有祖先是“定位”元素，因此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>

Answer 2

如果要放置具有绝对位置的元素，则需要基本元素的位置值不是默认值。

如果您将父div的位置值更改为“relative”，则可以解决问题。

Answer 3

您需要声明父div position: relative或position: absolute本身。

relative就是你在这种情况下所寻求的。

Answer 4

您需要先提供父div relative位置：

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

Answer 5

您也可以将位置：绝对值应用于父级。总代码低于

<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>

Answer 6

如果像我一样，你试图将一个元素放在另一个元素上，那么浮动元素需要在另一个元素内部，而不是兄弟姐妹。现在你的position:absolute;可以正常工作了！

绝对的位置不起作用

6 个答案: