Positionierung fester Bilder innerhalb von div (Pins auf der Karte)

Question

Ich habe ein "map" div mit den css-Regeln height: 400px; width: 800px; background: url(map.png) . Dieses Div hat ein Hintergrundbild einer Weltkarte. Ich habe einige Bilder, die als "Pins" fungieren, die ich auf der Karte in bestimmten Bereichen platzieren möchte. Welche CSS-Eigenschaften muss ich dem Bild zuweisen, um es z. B. innerhalb des Divs "Karte" an bestimmten oberen/linken Pixelkoordinaten des Divs "Karte" platzieren zu können? Ich kann sie relativ zum gesamten Textkörper positionieren, aber nicht zu einem bestimmten Div.

Answer 1

Setzen Sie position: relative auf das Karten-Div, dann setzen Sie position: absolute auf die Pins. Mit :

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

auf die Stecknadeln, während sie vom Karten-Div enthalten sind, das eine relative Position hat, würde die Stecknadeln in die linke obere Ecke setzen. Ich hoffe, das ist klar genug...

Answer 2

Am einfachsten ist es, sie in die map div, geben #map { position: relative; } und geben dann die Nadeln position: absolute; con top y left Eigenschaften (was Sie wahrscheinlich bereits tun).

Wenn es nicht möglich ist, die Stifte in die map selbst können Sie dasselbe mit einem Container-Div tun:

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

Wie auch immer, der Punkt ist, dass absolute Die Positionierung ist relativ zum nächstgelegenen Elternteil, der position: relative; Das ist die body standardmäßig, aber Sie können die Eigenschaft auch jedem anderen Element zuweisen, das Sie möchten.

Answer 3

Sie können dies tun, indem Sie position: absolute . Er positioniert sich relativ zum ersten relativ positioniertes Elternteil. Stellen Sie also sicher, dass das Kartenelement, in dem die Pins erstellt werden, auf position: relative . Beispiel:

#map {
  position: relative;
}

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

Sie können oben, unten, rechts, links verwenden.

Answer 4

Sie müssen Folgendes einstellen position: relative; auf der Karte. Dies wirkt sich nicht auf die Positionierung des Karten-Divs aus, sondern legt einen Block für seine Kinder an. So können Sie den Markt positionieren mit position:absolute; y left/right . Ihre Position wird relativ zur oberen, linken Ecke des Kartenausschnitts berechnet.

Hier finden Sie eine vollständige Referenz zum Thema Blöcke und Positionierung: http://www.w3.org/TR/CSS2/visudet.html#containing-block-details