html - フィールドセットの右上隅に要素をフロートします

Question

divの右側に浮かんでいるこのボックスを取り出して、右上隅と同じ高さになるようにする方法はありますか？position:relative私はそれを作ってみましたtop:0pxが、それは伝説のパディングによって頑固に相殺されたままです。

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

Answer 1

親の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 2

位置を に設定するかabsolute、#title要素をに設定する必要がありfloat:leftます。

position:absoluteon #top とon #out の例position:relative:

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

#title を に設定した例float:left:

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

Answer 3

これを追加してみてください#top：

position: relative;
top: -24px;

デモ： http： //jsfiddle.net/dpUM2/10/

Answer 4

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;

    }​