la position de l'image fixe à l'intérieur de la div (broches sur la carte)

J'ai une "carte" des div avec les règles css height: 400px; width: 800px; background: url(map.png). Cette div a une image d'arrière-plan d'une carte du monde. J'ai quelques images qui agissent comme des "broches" que je veux placer sur la carte dans des domaines spécifiques. Quelles propriétés CSS aurais-je donner l'image pour être en mesure de, par exemple, de les placer dans la "carte" div par des haut/gauche les coordonnées des pixels de la "carte" de la div? Je suis en mesure de position par rapport à l'ensemble du corps, mais pas spécifique à la div.

OriginalL'auteur Brian David Berman | 2010-10-10

  1. 6

    Position: relative sur la carte div, puis le mettre en position: absolute sur les broches. Aide :

    left: 10px;
top: 10px;
position: absolute;

    sur les pins, alors qu'ils sont contenus par la carte de la div, qui a une position relative, serait de mettre les broches dans le coin supérieur gauche. J'espère que c'est assez clair...

    OriginalL'auteur Claudiu

  2. 3

    La meilleure chose à faire est de les mettre à l'intérieur de la map div, donner #map { position: relative; } et de donner ensuite les pins position: absolute; avec top et left propriétés (probablement à ce que vous êtes déjà fait).

    Si c'est impossible de mettre les broches dans le map lui-même, vous pouvez faire la même chose avec un div conteneur:

    <div id="map-wrapper">
    <div id="map">...</div>
    <!-- pins -->
</div>

    De toute façon, le point est que absolute positionnement par rapport à la plus proche parent qui a la position: relative; C'est le body par défaut, mais vous pouvez lui donner la propriété de tout autre élément que vous souhaitez.

    OriginalL'auteur VoteyDisciple

  3. 3

    Vous pouvez le faire en utilisant position: absolute. Il se positionne par rapport à la première relative positionné parent. Donc, assurez-vous que l'élément de carte dans lequel les broches sont créés est mis à position: relative. Exemple:

    #map {
  position: relative;
}

#pin_a {
  position: absolute;
  top: 25px;
  left: 10px;
}

    Vous pouvez utiliser le haut, le bas, à droite, à gauche.

    OriginalL'auteur Alec

  4. 1

    Vous devez définir position: relative; sur la carte. Ceci n'affectera pas la carte div positionnement, mais établira un bloc contenant pour ses enfants. Ceci étant fait, vous serez en mesure de position sur le marché avec position:absolute; et left/right. Leur position sera calculé à partir de par rapport au coin supérieur gauche de la carte div.

    Voir ici pour une référence complète sur contenant des blocs et positionnement: http://www.w3.org/TR/CSS2/visudet.html#containing-block-details

    OriginalL'auteur Alin Purcaru