父不在位置时的定位：相对答案

【问题标题】：Positioning when parent isn't position: relative父不在位置时的定位：相对
【发布时间】：2014-06-06 03:58:06
【问题描述】：

我在父 div 中有一个按钮。我希望按钮位于 div 的右上角。

如果父 div 将其 CSS position 设置为 relative，我只需将按钮的 position: absolute 和 top: 0px 和 right: 0px 或类似的东西（权利实际上是动态地基于按钮的大小）。

问题是，这个div是别人做的，没有位置属性，我也改不了它的样式。我怎样才能将此按钮放置在我想要的位置？

示例 HTML：

<div id="someone_elses_div">
  <button id="my_button">Hello World</button>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

您可以使用 css calc() 根据 div 的宽度计算按钮的左边距：FIDDLE

如你所见，目前几乎所有的浏览器都支持calc():CALC()

css:

#someone_elses_div{
    background:red;
    height:100px;
    width:70%;
}
#my_button{
    width:100px;
    margin-left:calc(100% - 100px);
}

【讨论】：

正要说绝对定位不需要父元素有位置属性，你抢我了。
实际上它不起作用，他需要将按钮定位在 div 内。我已经更新了我的答案。
我用 float:right 替换了你的 margin-left 行，这似乎也能正常工作。无论哪种方式都很好。
这在 FF 24.5.0 上不起作用。 calc(100%) 有效但 calc(100% - 100px)
根据该图表，FF24 具有完全的计算兼容性，因此错误可能出在其他地方。请注意， calc 中的 vars 和 operator 必须用空格分隔。例如：calc(100%-100px) not good 而calc(100% - 100px) good。

【解决方案2】：

我不确定这是否会有所帮助，但您是否因为无法单独访问而无法更改父母的位置？如果是这样，您可以使用一些 jQuery 来添加位置。

$(document).ready(function () {
     $('#someone_elses_div').css({
          'position':'relative'
     });
});

【讨论】：