Beim Anzeigen einer Div-Box "drückt" der Hintergrund durch

  • Themenstarter Themenstarter Der_V
  • Beginndatum Beginndatum
D

Der_V

Guten Tag,

Ich hätte da ma ein Problem:
Ich hab eine Div-Box in dem eine Label und eine weitere Div-Box sind. die innere Div-Box wird nicht angezeigt, erst wenn ich mit der Maus über die äußere Div-Box gehe. Jetzt habe ich das Problem, dass wenn diese Div-Box angezeigt wird drückt die Schrift im Hintergrund durch!
Ich habe keine ahunung wieso das so ist!! Ich hab schon versucht mit z-index die Ebenen fest zu bestimmen aber auch das klappte nicht

Ich hab das jetzt mal vorbereitet: http://jsfiddle.net/2FZxr/

Das Java-Script ist noch nicht ganz fertig, sollte aber mit dem CSS nichts zu tun haben.
Könnt ihr mir vll nen Tipp geben, weswegen der Hintergrund "durchdrückt" ? und was ich da am besten gegen tun kann

Danke!
Gruß
V
 
Hi,

hier liegt eine falsche Zuordnung der gewünschten Schichtpositionierung für die DIV-Ebenen vor.

z-index funktioniert hier sehr wohl, aber nur in Verbindung mit einer Angabe zur Positionsart.

CSS:
.hovertext {                
                        background-color: #FF00FF;
                        width: 200px;
                        height:80px;
                        margin-top:-90px;
                        margin-left:-80px;
                        text-align: center;
                        color:#000000;
                        opacity: 0;
                        position:relative; /* relative Positionsart */
                        z-index:2; /* Schichposition  */
}

mfg Maik
 
Geil!
Danke für den Tipp! Ich wusste leider nicht, dass zu dem Z-Index die Position relative dazu gehört!!
Vielen Dank für den Tipp :)
Gruß
V
 
Ich wusste leider nicht, dass zu dem Z-Index die Position relative dazu gehört!!
Eine relative Positionierung ist nicht zwingend vorgeschrieben, absolute und fixed wären ebenso denkbar, aber hier wohl nicht vonnöten / erwünscht.

Nur nicht static - was dem Fehlen der Angabe zur Positionsart gleichkommt.

mfg Maik
 
Eine Frage hätte ich aber noch!

Ich hab unter dem oben erwähnten Link nun alles noch ma angepasst und aktualisiert.
Das ganze funktioniert vom Prinzip auch, nur der IE macht wieder einmal Probleme! Und zwar ist es so, dass die "Eventbox" eine feste höhe und Breite hat! Wird nun die Div-Box "Hovertext" angezeigt, so ist diese aber wesentlich breiter als als die Eventbox. Deswegen ja auch die Unterschiedlichen Schichten weil die HovertextBox drüber liegen soll. Im Firefox wird das auch richtig angezeigt! Im IE wird alles was rechts steht, soweit nach rechts geschoben, dass die Hovertext box auch zwischen passt.
Wie mache ich es nun auch im IE (IE8), dass die hovertext-box über den anderen Boxen angezeigt wird
Ich hoffe ich habe mich eingermaßen verständlich ausgedrückt!

Gruß
V
 
Nimm mal die Klasse .hovertext anstelle von position:relative mit position:absolute aus dem Textfluß.

mfg Maik
 
Perfekt!!

Ich glaube ich muss mich ma mehr mit der position-Sache auseinander setzen ;)

Hab vielen Dank
Gruß
V
 
Zurück