✔ Problem mit z-index Angabe

mediaroad · 4. Juni 2009

Hallo zusammen,

ich habe ein Problem. Ich will bei meiner Internetseite einen Div über alle anderen legen. Dies habe ich mit dem z-index gelöst und dem obere Div, der über allen anderen liegt, position:absolute; zugewiesen.

Nun ist mein erstes Problem, dass er den oberen Div im IE 6 gar nicht anzeigt und sich der obere Div durch position:absolute; an das Browserfenster anpasst und demnach die Position variiert.

Ich möchte gern, dass der obere Div eine feste Position hat, egal wie groß das Browserfenster ist und das er das in allen Browsern (FF, IE 7, IE 6, Opera, Safari usw.) gleich anzeigt.

Ich habe auch schon gegooglet und probiert, jedoch bin ich zu keinem Ergebnis gekommen.

Ich hoffe ihr könnt mir helfen!
Schonmal vielen Dank im Voraus.

Hier nocheinmal zum besseren Überblick der Code

Code:

@charset "utf-8";
body{
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	background-image:url(../bilder/bg.png);
	background-repeat:repeat;
}
img{
	border:0px;
	font-size:1px;
}
img a{
	border:0px;
	font-size:1px;
}
#corpus{
	width:980px;
	height:auto !important;
	margin:0px auto;
}
#wrapper{
	width:980px;
	height:auto !important;
}
#head{
	width:980px;
	height:80px;
	float:left;
}
#logo_links{
	width:45px;
	height:80px;
	float:left;
	background-image:url(../bilder/logo_links.png);
	background-repeat:no-repeat;
}
#logo{
	width:240px;
	height:80px;
	float:left;
}
#logo_rechts{
	width:95px;
	height:80px;
	float:left;
	background-image:url(../bilder/logo_rechts.png);
	background-repeat:no-repeat;
}
#navi{
	width:550px;
	height:80px;
	float:left;
}
#navi_rechts{
	width:50px;
	height:80px;
	float:left;
	background-image:url(../bilder/navi_rechts.png);
	background-repeat:no-repeat;
}
.linie{
	width:980px;
	height:5px;
	float:left;
	background-color:#e8c424;
	font-size:1px;
	z-index:1;
}
#bild{
	width:980px;
	height:260px;
	float:left;
	z-index:1;
}
.teaser_bg{
	width:150px;
	height:285px;
	float:left;
	background-image:url(../bilder/teaser.png);
	background-repeat:no-repeat;
	z-index:2;
	position:absolute;
	top:230px;
	left:500px;
}
#content_bg{
	width:980px;
	min-height:270px;
	height:auto !important;
	height:270px;
	float:left;
	background-image:url(../bilder/content_bg.png);
	background-repeat:no-repeat;
	background-color:#040406;
	z-index:1;
}

HTML:

<body>
	<div id="corpus">
		<div id="wrapper">
			<div id="head">
				<div id="logo_links"></div>
				<div id="logo"></div>
				<div id="logo_rechts"></div>
				<div id="navi"></div>
				<div id="navi_rechts"></div>
			</div>
			<div class="linie"></div>
			<div id="bild"><img src="bilder/bild.png" /></div>
			<div class="linie"></div>
			<div id="content_bg"></div>
		</div>
			<div class="teaser_bg"></div>
	</div>
</body>

Der obere Div ist .teaser_bg - dieser soll über den anderen liegen.

Maik · 4. Juni 2009

Hi,

ich erkenne hier kein z-index-Problem im IE6:

Damit sich die absoluten Positionsangaben des Blocks nicht auf das Browserfenster beziehen, muß der umschliessende Block #corpus relativ positioniert werden.

mfg Maik

mediaroad · 4. Juni 2009

Also ich habe jetzt nocheinmal gesucht und gesucht und auch was gefunden. ( http://www.cssplay.co.uk/layouts/fixed.html )
Das hab ich auch versucht und es klappt nach ein paar Änderungen und Anpassungen.

Nun habe ich nur noch das Problem, wenn ich die Seite zentriert im Fenster darstellen will, funktioniert das Ganze nicht mehr. Ich find es aber nich wirklich schön, wenn die Seite entweder ganz links andockt oder auch je nach Fenstergröße weiter nach rechts rutscht durch das margin.

Also bräuchte ich jetzt nur noch eine Lösung, dass das funktioniert auch wenn die Seite zentriert im Fenster dargestellt wird.

Ich hoffe das ihr mir dabei helfen könnt!

Hier mein geänderter Code

Code:

@charset "utf-8";
body{
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	background-image:url(../bilder/bg.png);
	background-repeat:repeat;
}
img{
	border:0px;
	font-size:1px;
}
img a{
	border:0px;
	font-size:1px;
}
#corpus{
	margin:0px 0px 0px 200px; 
	display:block; 
	width:980px; 
	height:auto !important; 
}
#wrapper{
	margin:0px 0px 0px 200px; 
	display:block; 
	width:980px; 
	height:auto !important; 
}
#head{
	width:980px;
	height:80px;
	float:left;
}
#logo_links{
	width:45px;
	height:80px;
	float:left;
	background-image:url(../bilder/logo_links.png);
	background-repeat:no-repeat;
}
#logo{
	width:240px;
	height:80px;
	float:left;
}
#logo_rechts{
	width:95px;
	height:80px;
	float:left;
	background-image:url(../bilder/logo_rechts.png);
	background-repeat:no-repeat;
}
#navi{
	width:550px;
	height:80px;
	float:left;
}
#navi_rechts{
	width:50px;
	height:80px;
	float:left;
	background-image:url(../bilder/navi_rechts.png);
	background-repeat:no-repeat;
}
.linie{
	width:980px;
	height:5px;
	float:left;
	background-color:#e8c424;
	font-size:1px;
	z-index:1;
}
#bild{
	width:980px;
	height:260px;
	float:left;
	z-index:1;
}
.teaser_bg{
	display:block; 
	top:10px; 
	left:500px; 
	width:130px; 
	height:130px; 
	position:fixed; 
}
* html .teaser_bg{
	position:absolute;
}
#content_bg{
	width:980px;
	min-height:270px;
	height:auto !important;
	height:270px;
	float:left;
	background-image:url(../bilder/content_bg.png);
	background-repeat:no-repeat;
	background-color:#040406;
	z-index:1;
}

HTML:

<body>
	<div id="corpus">
		<div id="wrapper">
			<div id="head">
				<div id="logo_links"></div>
				<div id="logo"></div>
				<div id="logo_rechts"></div>
				<div id="navi"></div>
				<div id="navi_rechts"></div>
			</div>
			<div class="linie"></div>
			<div id="bild"><img src="bilder/bild.png" /></div>
			<div class="linie"></div>
			<div id="content_bg"></div>
		</div>
		<div class="teaser_bg"></div>
	</div>
</body>

Maik · 4. Juni 2009

Eine fixierte Position richtet sich immer an den Grenzen des Browserfensters aus:

fixed = absolute Positionierung, gemessen am "Viewport", d.h. am Browserfenster. Bleibt beim Scrollen stehen.

Quelle: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position

mfg Maik

mediaroad · 4. Juni 2009

Hallo Maik,

ich habe deine Variante veruscht und simsalabim es funktioniert.
Ich dachte ich hätte vorhin schon versucht #corpus und auch #wrapper position:relative; zuzuweisen und er hat nichts gemacht. Naja ich habe auch so viel probiert, ich weiß schon nicht mehr was alles.

Naja zumindest funktioniert es jetzt. Ich habe eine dem #corpus ein position:relative; gegeben.

Ich danke dir für deine Hilfe!

Maik · 4. Juni 2009

Gern geschehen

Falls du an der zentrierten Version des fixiert positionerten Blocks interessiert bist:

CSS:

#corpus{
        margin:0 auto;
        width:980px;
        height:auto !important;
}
#wrapper{
        /*margin:0px 0px 0px 200px;*/
        height:auto !important;
}

.teaser_bg{
        display:block;
        top:10px;
        left:50%;
        margin-left:-65px;
        width:130px;
        height:130px;
        position:fixed;
}

mfg Maik

✔ Problem mit z-index Angabe

mediaroad

Mitglied

Maik

mediaroad

Mitglied

Maik

mediaroad

Mitglied

Maik

Neue Beiträge