绝对位置不工作

本文介绍了绝对位置不工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图放置一个id'absPos'在绝对位置相对于其父div。但它不工作，div位于页面的左上角。

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.

我的代码示例如下

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

注意

推荐答案

将位置：相对应用于父div。

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

这篇关于绝对位置不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！