用css将一个div固定到第二个div的右上角答案

【问题标题】：fixing one div to second div top right corner with css用css将一个div固定到第二个div的右上角
【发布时间】：2015-08-12 23:35:18
【问题描述】：

我有以下 div

<div id="outer"><img src="myimgpath"><div id="name">Username</div></div>

如何将内部 div 固定到外部 div 的右上角？

【问题讨论】：

标签： html css

【解决方案1】：

试试这样的：

#outer{position:relative;overflow:hidden;height:100px;}
#name{position:absolute;right:0;}

【讨论】：

这似乎根本不起作用。在 Firefox 中，“用户名”不可见。在 Chrome 中，“用户名”在首次呈现时出现，而不是锚定在图像的右上角，并在您调整页面大小时消失。 (Here's a Fiddle)绝对定位是绝对的，不是相对于它的容器。
@JMD 包含图像的 div 是块级元素。图像本身具有固定的宽度。绝对定位是相对于它最近的“相对”容器。 Here's a Fiddle

【解决方案2】：

<div id="outer" style="position:relative">
  <img src="myimgpath">
  <div id="name" style="position:absolute; top:0px; right:0px;">Username</div>
</div>

【讨论】：

绝对定位是绝对的。 OP希望它相对于#outer div。

【解决方案3】：

将float:right;添加到内部div

【讨论】：