Wie Z-Index richtig anwenden?

[nchristoph]

Hallo zusammen,

Ich tüftle gerade wieder ein wenig und hab folgende Frage:

Wie wende ich Z-Index richtig an.

Hier mal der HTML Code:

				<div id="header_r">

						<div id="logo"><div id="mph_290">Please update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash Player</a> to view content.</div>
    <script type="text/javascript">
    var flashvars = { mpid: "mph", align: "center", showVersionInfo: "false"};
    var params = { wmode: "transparent", base: "http://localhost/"};
    var attributes = {};
    swfobject.embedSWF("http://localhost/modules/mod_mph/mph.swf?290", "mph_290", "900", "200", "9.0.0", "", flashvars, params, attributes);
    </script></div>
						
					</div>
				</div>
			</div>


			<div id="search">
				<div class="klammer"><img src="/images/stories/general.png" alt="Keplinger Schriftzug" align="left" /></div>
			</div>

Ich will jetzt, das die DIV Klammer über der Div Logo angezeigt wird, also das Div Logo im Hintergrund ist und DIV Klammer im Vordergrund ist.


Mein ansatz dazu ist wie folgt:

div#logo {
	position: absolute;
	left: 0;
	top: 0;
	float: left;
	width: 298px;
	height: 75px;
	margin-left: 21px;
	margin-top: 0px;
	z-index:1;
}

#search {
	float: right;
	width:320px;
	margin-top: -75px;
	margin-right: -20px;
	height: 40px;
	text-align:right;
        z-index:2;
}

Leider wird das nicht so gemacht, wie ichs mir gedacht hab. Es wird die Klammer hinter dem Logo platziert.

Was mach ich falsch?

Grüsse

 

[threadi]

Das hat mit dem Flash-Plugin zu tun, nicht mit z-index. Da Du swfObject verwendest, schau mal in deren Hilfe nach wie man dort den wmode-Parameter korrekt übergibt. Hab auf die Schnelle z.B. das hier gefunden: http://www.brianyerkes.com/swfobject-help-when-placing-a-div-over-flash/

 

[SpiceLab]

Wie wende ich Z-Index richtig an.

Mein ansatz dazu ist wie folgt:

div#logo {
	position: absolute;
	left: 0;
	top: 0;
	float: left;
	width: 298px;
	height: 75px;
	margin-left: 21px;
	margin-top: 0px;
	z-index:1;
}

#search {
	float: right;
	width:320px;
	margin-top: -75px;
	margin-right: -20px;
	height: 40px;
	text-align:right;
        z-index:2;
}

Leider wird das nicht so gemacht, wie ichs mir gedacht hab. Es wird die Klammer hinter dem Logo platziert.

Was mach ich falsch?

z-index benötigt grundsätzlich eine Angabe zur Positionsart position (absolute, relative o. fixed), die im zweiten Regelblock für #search fehlt.

Das hat mit dem Flash-Plugin zu tun, nicht mit z-index. Da Du swfObject verwendest, schau mal in deren Hilfe nach wie man dort den wmode-Parameter korrekt übergibt.

Scheint dafür in seinem JS-Code doch schon alles hergerichtet zu sein:

 var params = { wmode: "transparent", ... };

 

[nchristoph]

Danke spicelab,

hab jetzt dem searchdiv position:relative gegeben und jetzt funktionierts.