html - 変化に浮かぶ

Question

アイコンがあり、クリックすると新しいdiv（列）がdivコンテナに追加されます。問題は、新しいdiv（列）が表示されたときにボタンが右にシフトしないことです。position:fixedどういうわけかdiv内にのみ追加することは可能ですか？

これが私が持っているもののいくつかの画面です

そしていくつかのコード

    <div id="grid">
        <div id="add-col"></div>
        <div class="clear"></div>
        <div id="squares"></div>
    </div>


#grid{
    width:710px; 
    height: 470px;
    border:1px dotted #dddddd;
    display: none; 
    margin: 5px auto;
    padding: 5px;
    text-align:center;
    overflow: auto;
}

#add-col{
    margin:5px;
    float:right;
    background-image: url(images/table-add-column-icon.png);
    width: 32px;
    height: 32px;
    cursor: pointer;
}

Answer 1

CSSは次のようになります：

#grid{
    width:710px; 
    height: 470px;
    border:1px dotted #dddddd;
    display: none; 
    margin: 5px auto;
    padding: 5px;
    text-align:center;
    overflow: auto;

    position:relative; //added

}

#add-col{
    margin:5px;

    background-image: url(images/table-add-column-icon.png);
    width: 32px;
    height: 32px;
    cursor: pointer;

    position:absolute; //added
    top:5px; //added
    right:5px; //added

}

位置absoluteを使用すると、ボタンをその位置から移動することなく、コーナーに配置できます。

親に配置する必要のある位置を使用するにはposition:relative;、それ以外の場合はページを飛び回ります。

注： float＃add-colから削除されました