html - 将元素浮动到字段集的右上角

Question

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

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

Answer 1

您要么需要将位置设置为absolute，要么将#title元素设置为float:left。

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

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

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

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

Answer 2

Position:relative 在父节点上， position:absolute 在子节点上，注意 -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/