如何将元素定位到div的右下角答案

【问题标题】：How to position an element to the bottom right of a div如何将元素定位到div的右下角
【发布时间】：2014-03-28 13:39:56
【问题描述】：

容器 div 的固定宽度为 540 像素，最小高度为 200 像素。我想在该 div 的右下角放置另一个 div ... 我该怎么做呢

<div style="width:540px; min-height:200px;" class="container">
  <div style="position:absolute; bottom:0; right:0;" class="block">
  </div>
</div>

【问题讨论】：

绝对不是absolute，因为它应该与包含div的“相对”对吧？
您的外部div 应定位为relative，以使内部绝对工作正常。只需将position:relative添加到外部div的样式中

标签： html css

【解决方案1】：

试试这个：

<div style="width:540px; min-height:200px; position:relative;" class="container">
  <div style="position:absolute; bottom:0; right:0;" class="block">
  </div>
</div>

你应该添加一个 position:relative;在.container中

【讨论】：

感谢 hanze :) 它奏效了。有什么办法不让它绝对吗？喜欢它会粘在右下角但会像普通（静态）元素一样工作吗？

【解决方案2】：

以下作品（用于演示目的）：

<div style="width:540px; min-height:200px; position:relative; border: 1px solid red;" class="container">
  <div style="width: 50px; height: 50px; position:absolute; bottom:0; right:0; border: 1px solid blue;" class="block">
  </div>
</div>

看到这个JSFiddle

您始终可以将 CSS 分为“容器”和“块”类。

【讨论】：

【解决方案3】：

<div style="width:540px; min-height:200px; position:relative; border: 1px solid red;" class="container">
<div style="width: 50px; height: 50px; position:absolute; bottom:0; border: 1px solid blue; margin-left : 480px;" class="block">
 </div>
 </div>

这也会对您有所帮助。指定块 div 的大小并从容器 div 中减去它的大小，并将结果保留在 margin-left 中。

【讨论】：