将元素浮动到字段集的右上角答案

【问题标题】：float element to top right corner of fieldset将元素浮动到字段集的右上角
【发布时间】：2012-11-13 05:18:03
【问题描述】：

有没有办法让我漂浮在 div 右侧的这个盒子，让它与右上角齐平？我尝试将其设为position:relative 和top:0px，但它仍然顽固地被图例的填充所抵消。

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

【问题讨论】：

标签： html css

【解决方案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/

【讨论】：

【解决方案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/

【讨论】：

【解决方案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;

    }

【讨论】：

【解决方案4】：

尝试在#top中添加这个：

position: relative;
top: -24px;

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

【讨论】：