绝对位置不起作用答案

【问题标题】：Absolute position is not working绝对位置不起作用
【发布时间】：2011-04-19 07:58:06
【问题描述】：

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

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

问候

【问题讨论】：

不是特别回答该问题，但可能对遇到与我导致此页面类似的问题的其他人有所帮助：确保您没有忘记职位规范中的单位.我不小心使用了“bottom:79;”而不是“bottom:79px;”，不知道为什么会出现在页面顶部。

标签： html css css-position

【解决方案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>

【讨论】：

这个问题是父div的css应用到子div的css上，比如不透明度等，很难调试。

【解决方案2】：

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

在您的情况下，如果您将父 div 的位置值更改为“相对”，则可以解决此问题。

【讨论】：

我的元素的第 n 个父元素的位置不是默认值，但我需要将我的元素绝对放置在窗口的左上角，所以与这个问题正好相反。能帮上忙吗？为什么会这样？

【解决方案3】：

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

relative 是您在这种情况下要查找的内容。

【讨论】：

【解决方案4】：

您需要先给父 div relative 位置：

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

【讨论】：

【解决方案5】：

您还可以将 Position:absolute 应用于父 Div。总代码如下

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

【讨论】：

【解决方案6】：

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

【讨论】：