Bouton devant div

Question

Je ne suis pas un expert CSS. J'essaie de placer un <input type="button"> au centre d'un <img> et j'ai du mal à le faire. Here's a fiddle et voici mon code HTML:

<div id="avatar"> 
    <img src="http://www.averageadjustersusca.org/aaa/images/profileholder.gif" alt="My avatar" /> 
    <input id="btnAvatar" class="button" type="button" name="Button" value="Change"> 
    <p>Text</p> 
</div> 

Je veux l'entrée à afficher sur l'image,, le texte a besoin aussi d'être à droite. J'ai essayé d'utiliser:

img { width: 300px; height: 300px; float: left; } 
input { position: absolute; margin:140px 0px 0px 130px;} 

Mais il ne fonctionne que sur le chrome/safari, sur d'autres navigateurs, le bouton est placé après l'image et non en face de celui-ci.

Quelle est la meilleure façon de faire cela? Obs: L'espace dans lequel se trouve le bouton doit être vide, sinon le texte va se déplacer vers le haut.

---

Voici comment il est affiché sur le chrome:

Voici comment il est affiché sur Firefox:

Answer 1

Vous devez spécifier les positions x et y sur un absolu position. Modifiez le code CSS pour l'entrée à ceci:

input { position: absolute; top:0; left:0; margin:140px 0px 0px 130px;} 

Answer 2

utilisation z-index

input { position: absolute; margin:140px 0px 0px 130px; z-index:2} 

ce pousse le bouton une couche jusqu'à

après avoir compris la question est bien ici une solution

img { width: 300px; height: 300px; float: left; border:1px solid black; position:absolute} 
input { position: absolute; margin:140px 0px 0px 130px;} 

comme mentionné ci-dessous dans les commentaires le problème était dans le positionnement

Answer 3

Vous pouvez ajouter position:relative pour #avatar et donner #btnAvatar top:0; left:0;

Answer 4

Cela devrait le faire: http://jsfiddle.net/a6tA7/9/

Je vous recommande d'utiliser top: et left: pour positionner l'élément d'entrée plutôt que margin:

Answer 5

Il est simple et méthode propre pour faire ce code. L'astuce consiste à utiliser la balise DIV pour contenir et positionner tout en place.

1. Utilisez un DIV principal pour tout contenir et lui donner la position: propriété relative.
2. Placez les balises img et input dans un seul DIV et affectez à cette propriété DIV la propriété float: left. Utilisation de CSS pour sélectionner le point P et le faire flotter vers la gauche. Cela placera le texte à côté de la DIV contenant le img et l'entrée.
3. Affectez maintenant à la balise d'entrée la propriété: absolute en utilisant les propriétés TOP & LEFT pour la positionner en place.

Voici un exemple:

<div id="avatar-container"> 
    <div id="avatar-image-btn"> 
      <img src="http://www.averageadjustersusca.org/aaa/images/profileholder.gif" alt="My avatar" /> 
      <input id="btnAvatar" class="button" type="button" name="Button" value="Change"> 
    </div> 
    <p>Text</p> 
</div> 

<style> 
    #avatar-container { position: relative; } 
    #avatar-container p { float: left; } 
    #avatar-image-btn { float: left; } 
    #avatar-image-btn img { } 
    #avatar-image-btn input { position: absolute; top: 135px; left: 120px; cursor: pointer; } 
</style> 

Voir, propre et simple, fonctionne à chaque fois et est compatible multi-navigateur.

* La propriété margin peut provoquer un désordre lorsqu'elle est utilisée sans précaution. La meilleure pratique consiste à l'utiliser pour empiler des étiquettes dans des divs et non pour les positionner avec de grandes marges.