位置绝对 div 服从身体边缘答案

【问题标题】：Position absolute div obeying body margin位置绝对 div 服从身体边缘
【发布时间】：2017-10-08 16:41:04
【问题描述】：

我在 html 文件的正文中有一个绝对位置 div。我希望它服从身体边缘。在http://jsfiddle.net/vHApr 找到我的代码。以下是我的代码：

<html>
<head>
<style type="text/css">
body{
    margin: 50px;
    background-color: #ddd;
    color: #222;
    font: 11px "Helvetica Neue",Helvetica,Arial,sans-serif;
    min-width: 1080px;
    padding-top: 50px;
}
div.test{
    position:absolute;
    right:0px;
    top:55px;
}
</style>
</head>
<body>
<div class="test">
TEST
</div>
</body>
</html>

【问题讨论】：

如果您愿意使用 jquery，那么您可以在页面加载时将页边距从正文应用到 div
我想在不使用 right:50px 的情况下将右边距添加到绝对 div 的位置，正如您在 jsfiddle.net/cNV4L 看到的那样（位于底部）
为body 添加position:relative，则绝对祖先元素将与该元素对齐。顺便说一句，-1 表示 “紧急” - 没人在乎。
@CBroe，如果您将此作为答案，我会选择它作为接受的答案。谢谢CBroe ... :)

标签： absolute

【解决方案1】：

为body 添加position:relative - 然后绝对后代元素将与主体的边缘对齐，而不是与视口对齐（这发生在没有定位祖先的绝对定位元素上）。

【讨论】：

真正的魔法！谢谢！你永远不知道position:relative还能做什么

【解决方案2】：

试试这个

div.test{
position:absolute;

}

更新了 jsFiddle http://jsfiddle.net/vHApr/3/

【讨论】：