Problem mit div und z-index

Clubnite · 20.01.2011

Hallo leute,

ich habe ein Problem und finde selbst keine Antwort bzw. Lösung.

In meiner Seite ist Google Earth eingebunden. Da die Info-Balloons unbefriedigend gelayoutet sind, sollen eigene Balloons verwendet werden. Das versuche ich aktuell so zu lösen, dass onclick auf einen Marker ein HTML Element via Javascript erzeugt wird, welches sich noch außerhalb des Viewport befindet und nach der Erzeugung in den Viewport zum Ort des Geschehens (Mouseclick) verschoben wird. Das klappt ansich auch. Nur wird das Objekt nicht korrekt angezeigt:

initial css for balloon

Code:

div#myballoon {
  position: absolute;
  width: 0;
  height: 0;
  margin-top: -3000;
  margin-left: -3000;
  padding: 0;
  background: url('/pfad/zur/grafik.png') no-repeat;
  z-index: -30000;
}

HTML:

<div id="google-earth-wrapper">
  <div id="map3d">
    <div id="myballoon"><!-- custom balloon with html inside shown/hidden via js --></div>
  </div>
</div>

Code:

function moveBalloon(event){    
  ...
  // change css onclick
  $('#myballoon').css("width", 210);
  $('#myballoon').css("height", 122);
  $('#myballoon').css("margin-top", mouseY - 122);
  $('#myballoon').css("margin-left", mouseX - 105);
  $('#myballoon').css("z-index", 30000);
  
  // auto-hide after specified timeout
  setTimeout(function(){
    $('#myballoon').css("width", 0);
    $('#myballoon').css("height", 0);
    $('#myballoon').css("margin-top", -3000);
    $('#myballoon').css("margin-left", -3000);
    $('#myballoon').css("z-index", -30000);
  },4000);
}

Trotz eines z-index von 30000 liegt das Element nicht komplett über der Karte sondern ist noch darunter (siehe Screenshot). Gebe ich dem Element zusätzlich zur Hintergrundgrafik noch eine Hintergrundfarbe, passiert das nicht.

Code:

div#myballoon {
  ...
  background: [B][COLOR=Red]red[/COLOR][/B] url('/pfad/zur/grafik.png') no-repeat;
  ...
}

Was mache ich falsch bzw. wie muss es richtig sein?

fexx · 20.01.2011

AW: Problem mit div und z-index

gibts von google nicht ne api diese "blasen" zu bearbeiten?

Pixeltherapeutin · 20.01.2011

AW: Problem mit div und z-index

Schau doch noch mal hier , wegen der Erzeugung des eigenen Stapelkontextes. Oder poste mal etwas mehr Code.

Clubnite · 20.01.2011

AW: Problem mit div und z-index

gibts von google nicht ne api diese "blasen" zu bearbeiten?

Ja. Siehe meinen dritten Satz im ersten Post.

Schau doch noch mal hier , wegen der Erzeugung des eigenen Stapelkontextes.

Das habe ich, nur hilft mir das nicht, wenn ich vermutlich aufgrund falschen Verständnisses meinen Fehler nicht erkenne. So wie es da steht:

So werden im Beispiel die Boxen D, E und F als Nachfahren der Box C gesondert sortiert: Box F (z-index:-1) überdeckt trotz niedrigerem Wert Box B (z-index:1), da sie als Nachfahre von Box C (diese liegt mit z-index:3 über Box B) lediglich innerhalb dieser sortiert wird. Außerhalb des neuen Kontexts liegende Elemente (A und B) können nicht zwischen diesen gestapelt werden.

Demnach müsste es unmöglich, meinen Balloon jemals über der Map angezeigt zu bekommen, da er ja außerhalb des Kontextes des von Google Earth erzeugten HTML Blocks ist. Komischerweise ist das nur so, wenn der Div nur die Hintergrundgrafik ohne Farbe hat. Mit Farbe verhält es sich ja, wie es soll. Das ist total unlogisch!!! Ich verstehe das nicht. Daher bitte ich um Hilfe.

Oder poste mal etwas mehr Code.

Mehr Code als oben gepostet kommt nicht zum Einsatz. Ich kann hier lediglich noch Posten, was Google Earth in den Target Div für HTML einfügt. Mehr ist da nicht.

HTML:

<div id="google-earth-wrapper" style="position:relative;">
   <!-- Google Earth Target Div -->
   <div id="map3d" style="position:relative;">
      <!-- mein Balloon -->
      <div id="myballoon" style="z-index:-20000; position:absolute; background:url('/grafik.png') no-repeat;"></div>           
      <!-- Google Earth Plugin -->
      <div style="position:relative;"> 
         <div id="_idlglue_pluginDiv___idlglue_plugin__99" style="position:relative;">
            <embed type="application/geplugin">
            <div style="position:absolute; z-index:100;">
               <div style="position:relative;">
                  <div style="position:absolute;"></div>
               </div>
               <iframe src="javascript:void(0);" style="position:absolute; z-index:-10000;" name="iframeshim" scrolling="no" frameborder="0"></iframe>
            </div>
         </div>
      </div>
   </div>
</div>

Der Code ist leider so breit, weil die Style-Infos vom Google Earth Plugin direkt eingebettet werden. Alle irrelevanten Infos hab ich schon rausgeschmissen. Ich hielt die 'position' und 'z-index' Attribute für relevant. Mehr kann ich nicht liefern, weil mehr nicht benutzt wird.

Edit:
Ich vermute inzwischen das Problem kommt durch die teilweise Transparenz der Hintergrundgrafik, denn

transparent bedeutet, dass die Farben des darunterliegenden Elements angenommen werden bzw. das Element durchscheinend ist. (Quelle: html-world.de).

Meine Grafik verschwindet ja wie gesagt, wenn sie in Verbindung mit background-color:transparent angelegt wird. Mit einer Farbe erscheint sie. Aber dann sieht die Grafik sch.... aus. Komischerweise passiert das aber auch, wenn ich anstelle eines .png ein .jpg nehme. Also ist es das wohl auch nicht. Ich bin mit meinem Latein am Ende und brauche echt Hilfe bei dem Problem.

Clubnite · 23.01.2011

AW: Problem mit div und z-index

Niemand, der weiterhelfen kann? Muss doch möglich sein, ein halb transparentes png über einer google map anzuzeigen...

sokie · 23.01.2011

AW: Problem mit div und z-index

Clubnite schrieb:
Gebe ich dem Element zusätzlich zur Hintergrundgrafik noch eine Hintergrundfarbe, passiert das nicht.

Code:

div#myballoon { ... background: [B][COLOR=Red]red[/COLOR][/B] url('/pfad/zur/grafik.png') no-repeat; ... }

Was mache ich falsch bzw. wie muss es richtig sein?

das naheliegendste wäre doch dann dem Hintergrund auch eine Farbe zu geben...
schon getestet?

Code:

div#myballoon {
  background: [B][COLOR=Red]transparent[/COLOR][/B] url(deine/grafik.png) no-repeat;
}

Clubnite · 23.01.2011

AW: Problem mit div und z-index

Jep! Grad eben nochmal. Es will einfach nicht. Sobald ein Teil der Grafik über der Karte liegt, wird dieser komplett transparent - selbst mit einem z-index von 999999.

Ich habe nochmal probiert, #myBalloon über den Div zu legen, ohne Google Earth zu laden. Das klappt einwandfrei - auch ohne Hintergrundfarbe (siehe Screenshot). Das Problem tritt erst auf, wenn das Plugin geladen wurde. Ich weiß nicht, ob die da per Eventlistener irgendwas manipulieren oder was da vor sich geht. Es will jedenfalls nicht klappen. Aber vielleicht liegts auch an mir. Ist mein HTML Code denn richtig? Habe ich den div #myBalloon denn richtig platziert? Ich meine, habe ich ihn richtig verschachtelt?
Ich weiß mir keinen Rat mehr.

Wer mag, kann sich das Problem gern mal live reinziehen. Ich wäre für eine Lösung unendlich dankbar!

cebito · 24.01.2011

AW: Problem mit div und z-index

Bis du das geklärt/erklärt hast, mach ich hier mal zu. Ist nicht die feine englische Art sich ohne Verlinkung in zwei oder mehr Foren für ein- und dasselbe Problem Hilfe zu holen.