Float on change

Question

J'ai une icône, qui, au clic, ajoute de nouvelles div (colonnes) au conteneur div. Le problème est que lorsque le nouveau div (colonnes) apparaît, le bouton ne se décale pas correctement. Peut être possible en quelque sorte ajouter position:fixed seulement à l'intérieur de la div?

Voici quelques écrans de ce que j'ai

Image1

Image2

Et un code

<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

Votre CSS ressemblerait à ceci:

#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 

} 

Avec la position absolute, vous pouvez placer un bouton dans un coin sans le déplacer de nouveau.

Pour utiliser une position, vous devez placer position:relative; à son parent, sinon il va voler autour de la page.

Note:float a été supprimé de # add-col