HTML: z-index definieren?

Communities Deutschland (Germany)
1

Hallo,

ich versuche fieberhaft ein Facebook-Icon über die Karte zu legen.
Es soll bsp unten links in der Ecke sein.
Mit diesem Code wird mir das Icon zwar angezeigt, aber immer nur beim bewegen der Karte.
Sobald die Tiles geladen sind, überdeken sie das Icon wieder.


<div style="width: 100%; height: 100%">
<div id="map"></div>
<div id="facebook" style="position:absolute; left: 200px; top: 200px; width: 26px; height: 26px; z-index: 2;"><img src="facebook.png" alt="Facebook"></div>
</div>

Ich weiß, es liegt am “z-index”.
Aber jedliche Veränderung (z-index: 1-X beim facebook, sowie z-index: 0 - -X bei der Karte) bringen mich nicht weiter…

Hat jemand eine Idee, woran es liegen könnte?

Gruß Wayne

2

Leider nicht.
EDIT:
Probier, auch mal deinem übergeordneten div und/oder der Map ein position:relative mitzugeben.

Aber du könntest - nachdem die Karte erstellt wurde - per JavaScript zum Beispiel dem Attribution-Text dein Icon anhängen, oder ein Button-Control-Element mit Icon als Hintergrundbild missbrauchen.

Viele Erfolg!

3

Ich leg ab und zu auf diese Weise Baustellenschilder über meine Baustellen…


<style type="text/css">
.bauItemInactive {background-image: url(../images/baustelle.png);;width:60px;height:52px;}
.olControlPanel{width:65px;height:60px;top: 10;left: 60px;}
</style>

.....
    <script>
 ....
var baustelle=new OpenLayers.Control.Button({displayClass: "bau", title: "Baustelle, erwarte nicht, dass alles funktioniert"});
var panel=new OpenLayers.Control.Panel();
panel.addControls([baustelle]);
map.addControl (panel);

Grüße, Max

4

Vielen Dank für die schnelle Hilfe…

Funktionieren tun beide Möglichkeiten optimal.
Die Einfachere ist die von E-Malte:


<div style="width: 100%; height: 100%">
<div id="map" style="position:relative;"></div>
<div id="facebook" style="position:absolute; left: 20px; bottom: 35px; width: 26px; height: 26px; z-index: 2;"><a href="" target="_blank"><img src="facebook.png" alt="Facebook" border="0"></img></a></div>
<div id="twitter" style="position:absolute; left: 50px; bottom: 35px; width: 26px; height: 26px; z-index: 2;"><a href="" target="_blank"><img src="twitter.png" alt="Twitter" border="0"></img></a></div>
</div>

Man gibt der Map lediglich eine “position:relative” mit.
Dann lassen sich beliebig viele Images auf der Karte einblenden.

Vielen Dank euch beiden und auch dem ganzen Forum hier.
Ich bin noch absoluter Anfänger in der OSM-API (obwohl diese Frage hier ja nicht unbedingt mit der API zu tun hatte)
und bekomme immer nette und gute Antworten auf meine Fragen.
Im Gugl-Forum hatte es da teilweiße einen ganz anderen “Ton”.

Beste Grüße
Wayne

5

Den hat hier nur einer drauf. Aber den kann man auch getrost ignorieren…

ajoessen