• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

z-index-Problem

P

pedder

New member
Hi Ihr,

ich hab ein für mich schier unlösbares Problem und suche jetzt nach einem genialen Kopf. Und zwar muss ich ein Element in eine bestehende Seite (die ich im Prinzip nicht ändern soll/darf) einbringen und dieses in den Vordergrund setzen. Konkret geht es um ein Videoelement, welches in den Vordergrund gebracht werden soll.
Das jetzt gezeigte, stark vereinfachte Codebeispiel soll mal die Problematik verdeutlichen. Den originalen Code zu posten ginge über mehrere Seiten.
Der Code hier zeigt jedoch genau die gleiche Problematik:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Testseite</title>
</head>
<body>

<div style="width:900px; height: 500px; margin: 0pt auto 0px; background-color:#ee0000">
	<div style="z-index:5; position:relative; margin:left; background-color:#00ee00"">
		<div style="z-index:7; color:#ffffff;">...hier ist dann das Video platziert...</div>
	</div>
</div>
<div id="videoBackground" style="position: fixed; width: 100%; height: 1024px; left: 0px; top: 0px; z-index: 6; visibility: visible; background-color: rgb(68, 68, 68);"/>

</body>
</html>

Das Div mit dem z-index:7 kommt nicht in den Vordergrund. Das ist mein Problem! Es muss in den Vordergrund. Und am besten ohne den restlichen Code zu ändern. Sofern das denn geht. Natürlich weiß ich auch wieso es hier nicht geht. Denn es wird immer der z-index des Elternelements gewertet, spricht z-index:5, aber das ist eben gerade mein Problem. Wie kriege ich das verfluchte div nach vorne in den sichtbaren Bereich??? Gern auch als JS-Hack oder sonst wie.
 
Ah, sorry, hatte ich vergessen anzugeben. Allerdings bringt es auch absolut nichts, wenn ich allen Divs bis auf dem "videoBackground" ein position:relative gebe! Auch wenn ich dem obersten ein absolute gebe, ändert es leider nichts.
 
Nee, das geht leider nicht. Der z-index des divs mit z-index:5 muss so beiben. Ich bin da leider in meinen Möglichkeiten sehr eingeschränkt. Es ist eine Seite in einem riesen Projekt, wo sehr viel umgestrikt und wieder sehr viel getestet werden müsste, wenn ich mal einfach die z-indizes vertausche. Die Struktur der Seite ist sehr viel komplexer. Kann man nicht irgendwie ausbrechen aus dieser Eltern-Kind-Beziehung? Ich habs schon mit !important versucht, ging aber auch nicht.
 
Ich weiß nicht wirklich genau, wie's werden soll, aber wenn Du dem div videoBackground ein z-index: 1; position:absolute; gibst, kann der div mit z-index:5 unverändert bleiben und der div z-index:7 ist im Vordergrund.

Edit: Die Höhe muss hier dann noch auf 100 % geändert werden.
 
Zuletzt bearbeitet:
Oh ja, wie es werden soll, hätte ich vielleicht mal erklären sollen... peinlich. Vermutlich hab ichs vergessen, weil es aus dem Code schon ein bißchen hervorgeht. Also so wie die z-indizes verteilt sind, soll es auch aussehen. ganz hinten soll der z-index.5-kram liegen, dann soll der videobackground über die komplette seite gehen und davor dann eben das div mit dem video-object. aber irgendwie scheints wohl nicht so zu gehen... dann muss ich wohl gewaltvoll das z-index:5 löschen und später wieder einfügen...
 
pedder schrieb:
..aber irgendwie scheints wohl nicht so zu gehen... dann muss ich wohl gewaltvoll das z-index:5 löschen und später wieder einfügen...
Zum Vergrößern anklicken....

Nö, wie ich es sehe ist das Ergebnis gleich, wenn Du schreibst:
Code: 
<div id="videoBackground" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; z-index:1; visibility: visible; background-color: rgb(68, 68, 68);"/>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben