当前位置：文江博客话题详情

CSS HTML css-position

绝对位置不起作用

发布于 2024-09-25 05:42:02 字数 664 浏览 1 评论 0 原文

我试图将 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>

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

问候

原文

I'm trying to place a div with id 'absPos' in absolute position in relation to its parent div. But it is not working, the div is placed at the top left corner of the page.

My code sample is as follows

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

Can you help me to solve this issue.
In my actual case instead of the red background color I've to place a background image.

Regards

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

糖粟与秋泊 2024-10-02 05:42:02

具有绝对定位的元素从其 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>

Elements with absolute positioning are positioned from their offsetParent, the nearest ancestor that is also positioned. In your code, none of the ancestors are "positioned" elements, so the div is offset from body element, which is the offsetParent.

The solution is to apply position:relative to the parent div, which forces it to become a positioned element and the child's 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>

回复收藏 0 原文

温暖的光 2024-10-02 05:42:02

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

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

回复收藏 0 原文

梦幻之岛 2024-10-02 05:42:02

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

在本例中，relative 就是您要查找的内容。

回复收藏 0 原文

美人迟暮 2024-10-02 05:42:02

您需要首先给出父 div relative 位置：

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

You need to give parent div relative position first:

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

回复收藏 0 原文

分分钟 2024-10-02 05:42:02

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

回复收藏 0 原文

饮湿 2024-10-02 05:42:02

您还可以将 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>

You can also Apply Position:absolute to the Parent Div. Total Code below

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

回复收藏 0 原文

~没有更多了~