在< div>右上方的定位元素 [英] Positioning elements at top right of <div>

问题描述

我有一个包含div，一些文字和一个按钮的小提琴。

我想将按钮放在div的右上角，不管div有多大，或者div有多少文本。

我通过像

  float：right; 
 position：relative; 
  

可能会做到这一点，但这不起作用，因为div中的'text'按下按钮。

有更好的方法吗？可能绝对将按钮置于右上角，而不是相对？

<如果你使用绝对定位，你可以简单地使用 top 和 right

code>以相对于右上角定位按钮。

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

jsFiddle演示

请注意，当绝对定位时，元素取出流，因此其他元素（如< p> there）可以去下，如果他们足够大。

I have a Fiddle that contains a div, some text and a button.

I'd like to position the button on the top right of the div no matter how big the div gets, or how much text is in the div.

I though something like

float: right;
position: relative;

may do the trick, but this doesn't work, because the 'text' in the div will push the button down.

Is there a better way to do this? Maybe absolutely position the button to the top right, instead of relative?

解决方案

If you use absolute positioning, you can simply use top and right to position the button relative to the top right corner.

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

jsFiddle Demo

Please note that when absolutely positioned, the element is taken out of the flow, so other elements (like that <p> there) can go "under" it if they are big enough.

这篇关于在&lt; div&gt;右上方的定位元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！