在<div>的右上角定位元素

Question

我是一名有用的助手，可以为您进行翻译。以下是需要翻译的内容：

我有一个包含div、文本和按钮的Fiddle。

我想将按钮定位在div的右上角，无论div变得多大或其中有多少文本。

我认为可以使用类似以下代码：

float: right;
position: relative;

使用may do the trick可能会有用，但这样不起作用，因为div中的“text”会将按钮向下推。

有更好的方法吗？也许可以将按钮的位置absolutely定位到右上角，而不是relative?

- Jeff

Answer 1

如果您使用绝对定位，可以简单地使用 top 和 right 将按钮相对于右上角定位。

#myButton {
    position: absolute;
    top: 0;
    right: 0;
}

jsFiddle演示

请注意，当元素被绝对定位时，它会从文档流中脱离出来，因此如果其他元素（如那个<p>）足够大，它们可以穿过它。

- kapa

---

只有在您的样例中，您将“<div>”包装器也设置为绝对定位...并非总是可以这样做！？ - Alexis Wilke

Answer 2

我猜你想要的是绝对定位，所以试试这个

position: absolute;
top: 0;
right: 0;

- pjam

Answer 3

刚刚将按钮样式更改为

#myButton {
    cursor: pointer;
    position: absolute;
    top:5px; 
    right: 5px;    
}

这是您要找的吗？

- Mike M