将浮点元素定位到字段集的右上角

Question

有没有办法把我漂浮在div右侧的这个盒子，让它与右上角齐平？我尝试过让它position:relative和top:0px，但它顽固地被传说的填充所抵消。

http://jsfiddle.net/loren_hibbard/dpUM2/

Answer 1

您需要将

位置设置为 absolute ，或者将 #title 元素设置为 float:left 。

#top 上的 position:absolute 和 #out 上的position:relative的示例：

http://jsfiddle.net/bozdoz/dpUM2/9/

#title 设置为 float:left 的示例：

http://jsfiddle.net/bozdoz/dpUM2/13/

Answer 2

位置：相对于父项，位置：绝对在子项上，请注意 -1px 以使其与父项的边框重叠。

#out{
width:300px;
height:400px;
background:#efefef;   
border:1px solid gray;   
position:relative;
}
#top{
top:0;
right:-1px;
background-color:#fff;
width:150px;
height:25px;
border:1px solid black;
position:absolute;
}

http://jsfiddle.net/calder12/dpUM2/14/

Answer 3

将CSS更改为如下：

#out{
        width:300px;
    height:400px;
     background:#efefef;   
         border:1px solid gray;
    padding:0px;    
    }
    #top{
     float:right;   
        background-color:#fff;
        width:150px;
        height:25px;
        border:1px solid black;
        margin:0px;
    }
    #title{
     padding:0px; 
        margin:0px;
        float:left;
    }​

Answer 4

尝试在#top中添加以下内容：

position: relative;
top: -24px;

演示：http://jsfiddle.net/dpUM2/10/