用CSS将一个DIV固定在另一个DIV的右上角

Question

我有以下的div元素。

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

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

- Web Worm

Answer 1

试试这样做：

#outer {
  position: relative;
  overflow: hidden;
  height: 100px;
}

#name {
  position: absolute;
  right: 0;
}

- edl

---

这似乎完全不起作用。在Firefox中，“用户名”不可见。在Chrome中，当它首次呈现时，“用户名”出现，但未锚定到图像的右上角，并且在调整页面大小后立即消失。（这是一个Fiddle）绝对定位是绝对的，而不是相对于其容器。 - JMD

@JMD 图像所在的 div 是块级元素。图像本身具有固定宽度。绝对定位是相对于其最近的“relative”容器的。这里是一个 Fiddle。 - edl

Answer 2

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

- John Hartsock

---

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

Answer 3

将float:right;添加到内部DIV中

- Soufiane Hassou