HTML – 绝对位置不起作用

前端之家收集整理的这篇文章主要介绍了HTML – 绝对位置不起作用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图将一个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>

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

问候

解决方法

应用位置:相对于父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>

猜你在找的HTML相关文章