Html 绝对位置不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3830486/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Absolute position is not working
提问by Ram
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.
我试图将一个 id 为 'absPos' 的 div 放在相对于其父 div 的绝对位置。但它不起作用，div被放置在页面的左上角。
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
问候
回答by Andy E
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.
具有绝对定位的元素从它们offsetParent的最近的祖先开始定位，也被定位。在您的代码中，没有一个祖先是“定位”元素，因此 div 从 body 元素偏移，即offsetParent.
The solution is to apply position:relativeto the parent div, which forces it to become a positioned element and the child's 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>
回答by Arun P Johny
If you are placing an element with absolute position, you need the base element to have a position value other than the default value.
如果要放置具有绝对位置的元素，则需要基础元素具有默认值以外的位置值。
In your case if you change the position value of the parent div to 'relative' you can fix the issue.
在您的情况下，如果您将父 div 的位置值更改为“相对”，则可以解决该问题。
回答by Pekka
You need to declare the parent div either position: relativeor position: absoluteitself.
您需要声明父 divposition: relative或position: absolute本身。
relativeis what you're looking for in this case.
relative是你在这种情况下要找的。
回答by Sarfraz
You need to give parent div relativeposition first:
您需要先给父 divrelative位置：
<div style="height: 80px; padding-left: 20px; position:relative;">
回答by Rajasekar
You can also Apply Position:absolute to the Parent Div. Total Code below
您还可以将 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>
回答by Mike GB
If, like me, you were trying to position an element over another element, the floating element needs to be inside of the other, not as siblings. Now your position:absolute;can work!
如果像我一样，你试图将一个元素定位在另一个元素上，浮动元素需要在另一个元素的内部，而不是作为兄弟元素。现在你position:absolute;可以工作了！
