Fatal编程技术网
  • html/
  • Html 绝对位置不起作用

Html 绝对位置不起作用

html css

Html 绝对位置不起作用,html,css,css-position,Html,Css,Css Position,我试图将id为“absPos”的div放置在相对于其父div的绝对位置。但它不起作用，该div被放置在页面的左上角 我的代码示例如下 <html> <body> <div style="padding-left: 50px;"> <div style="height: 100px"> Some contents <div>

我试图将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是从body元素偏移的，body元素是
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>
解决方案是将
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
相对位置：


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



您需要声明父div的
位置：相对
或
位置：绝对
本身


relative
是本例中要查找的内容。
如果要放置具有绝对位置的元素，则需要基本元素具有默认值以外的位置值


在您的情况下，如果您将父div的position值更改为“relative”，则可以解决此问题。
您还可以将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>




一些内容
一些文本

如果像我一样，您试图将一个元素放置在另一个元素上，则浮动元素需要位于另一个元素的内部，而不是作为兄弟元素。现在你的
位置：绝对可以工作
 我的元素的第n个父元素的位置不是默认位置，但我需要将我的元素绝对放置在窗口的左上角，因此与此问题正好相反。有什么办法吗？为什么会这样？问题是父div的css应用于子div的css，比如不透明度等，很难调试。这并不是问题的答案，但对于其他遇到类似问题的人来说，这可能会有所帮助，正如我所说的：确保你没有忘记职位说明书中的单位。我不小心用了“bottom:79；”而不是“bottom:79px；”，我不明白为什么它会在页面的顶部。