z-index Problem --> Wo ist der Fehler?!

[Tino]

Hallo zusammen,

ich habe ein HTML, in dem ein Hintergrundbild die Navigation aus gestalterischen Gründen leicht überdecken soll. Da ich in CSS sehr unerfahren bin habe ich gegoogelt und bin mit der z-index-Eigenschaft fündig geworden. Bei der Anwendung der Eigenschaft in meinem CSS scheitere ich jedoch seit mehreren Stunden. Was mache ich falsch?

Ich erlabe mir mal, das gesamte CSS zu posten. Die "Divs" mit dem Attribut z-index sind #navihorizontalcontainer (soll in den Hintergrund) und #companyemotion (soll in den Vordergrund).

Bin für jede Hilfe oder Anregung dankbar!

body {  
	margin: 0px;  
	padding: 0px;  
}  
  
h1 {  
	color:#FFFFFF;  
	font-family:verdana;  
	font-size:13px;  
	font-weight:bold;  
}  
  
h2 {  
	color:#FFFFFF;  
	font-family:verdana;  
	font-size:12px;  
	font-weight:100;  
}  
  
h3 {  
	color:#6b6055;  
	font-family:verdana;  
	font-size:12px;  
	font-weight:bold;  
}  
  
h4 {  
	color:#6b6055;  
	font-family:verdana;  
	font-size:12px;  
	font-weight:100;  
}  
  
#indexcontainer {  
	margin:auto;  
	width:1024px;  
}  
  
#header {  
	width:1024px;  
	height:75px;  
	padding-top:19px;  
}  
  
#logo {  
	width:57px;  
	height:56px;  
	background-image:url(pics/logo.png);  
	margin-left:58px;  
	float:left;  
}  
  
#claim {  
	margin-top:16px;  
	margin-left:28px;  
	font-family:arial;  
	font-size:18px;  
	color:#f5821f;  
	float:left;  
}  
  
#search {  
	width:136px;  
	height:18px;  
	margin-left:827px;  
	margin-top:19px;  
	background-image:url(pics/search.png);  
	background-repeat:no-repeat;  
}  
  
#navihorizontalcontainer {  
	width:1024px;  
	height:27px;  
	position:relative;  
	z-index:1;  
}  
  
#navihorizontal {  
	width:753px;  
	height:27px;  
	float:left;  
}  
  
ul#navihorizontalnormal {  
	margin: 0px;  
	padding: 0px;  
	padding-left: 0px;  
	margin-left:58px;  
	width: 695px;  
	height: 27px;  
}  
  
#navihorizontalnormal li {  
	display: block;  
	float: left;  
}  
  
#navihorizontalnormal li a {  
	margin-top: 0px;  
	padding-top: 7px;  
	margin-right: 0px;  
	display: block;  
	background-color: #ededed;  
	background-image: url(pics/background.png);  
	height: 27px;  
	width: 138px;  
	text-align: center;  
	font-family:Verdana;  
	font-size:12px;  
	color: #514c4c;  
	text-decoration: none;  
	-moz-border-radius:10px;  
	-khtml-border-radius:10px;	  
}  
  
  
#navihorizontalnormal li a:hover{  
	background-color: #f38628;  
	background-image: none;  
}  
  
#navimarkenspecial {  
	width:138px;  
	height:27px;  
	float:left;  
}  
  
ul#markenspecial  {  
	margin: 0px;  
	padding: 0px;  
	padding-left: 0px;  
	margin-left:72px;  
	width: 138px;  
	height: 27px;  
}  
  
#markenspecial li {  
	display: block;  
	float: left;  
}  
  
#markenspecial li a{  
	margin-top: 0px;  
	padding-top: 7px;  
	margin-right: 0px;  
	display: block;  
	background-color: #f7d3bc;  
	height: 27px;  
	width: 138px;  
	text-align: center;  
	font-family: verdana;  
	font-size:12px;  
	color: #514c4c;  
	text-decoration: none;  
	-moz-border-radius:5px;  
	-khtml-border-radius:5px;  
}  
  
#markenspecial li a:hover{  
	background-color: #f38628;  
}  
  
#line {  
	width:905px;  
	height:12px;  
	background-image:url(pics/line.png);  
	margin-left:58px;  
	margin-top:-1px;  
	margin-bottom:0px;  
	background-repeat: no-repeat;  
	float:left;  
}  
  
#subcenter {  
	height:435px;  
	margin-left:58px;  
	margin-top:34px;  
}  
  
#verticalnavicontainer {  
	width:160px;  
	height:435px;  
	background-image:url(pics/verticalnavibackground.png);  
	background-repeat:no-repeat;  
	float:left;  
}  
  
#navivertical {  
	margin-left:15px;  
	margin-top:15px;  
	margin-right:15px;  
	margin-bottom:15px;  
}  
  
ul#naviverticalcompany  {  
	margin: 0px;  
	padding: 0px;  
	padding-left: 0px;  
	margin-left:0px;  
	width:50px;  
}  
  
#naviverticalcompany li {  
	display: block;  
	width:50px;  
	float: left;  
}  
  
#naviverticalcompany li a{  
	width:50px;  
	margin-top: 8px;  
	padding-top: 0px;  
	margin-right: 0px;  
	display: block;  
	background:none;  
	text-align:left;  
	font-family: verdana;  
	font-size:12px;  
	font-weight:thin;  
	color: #6b6055;  
	text-decoration: none;  
}  
  
#naviverticalcompany li a:hover{  
	color: #f38628;  
}  
  
#subcontent {  
	width:720px;  
	height:435px;  
	margin-left:185px;  
}  
  
#companyemotion {  
	width:269px;  
	height:435px;  
	background-image:url(pics/companyemotion.png);  
	float:left;  
	position:relative;  
	z-index:2;  
}  
  
#subtxtbackground {  
	width:451px;  
	height:435px;  
	margin-left:269px;  
	background-image:url(pics/contentbackground.png);  
}  
  
#subtxt {  
	widt:451px;  
	height:435px;  
	margin-left:20px;  
	padding-top:12px;  
	margin-right:20px;  
	margin-bottom:20px;  
}  
  
#indexcenter {  
	width:1024px;  
	height:469px;  
	margin-left:58px;  
}  
  
#indexemotion {  
	width:905px;  
	height:469px;  
	background-image:url(pics/indexemotion.png);  
	margin-top:-2px;  
	float:left;  
}  
  
#indexteaser {  
	width:264px;  
	height:111px;  
	margin-top:280px;  
	background-image:url(pics/indexteaser.png);  
	border:thin;  
	border-color:#000000;  
	-moz-border-radius:10px;  
	-khtml-border-radius:10px;  
	style="filter:alpha(opacity=80);"  
	style="-moz-opacity:0.8;"  
	style="opacity:0.8;"  
}  
  
#indexteasertxt {  
	width:220px;  
	height:89px;  
	margin-left:15px;  
	margin-right:15px;  
	padding-top:20px;  
	margin-bottom:0px;  
	text-decoration: none;  
	font-family:Verdana;  
	font-size:13px;  
	font-weight:bold;  
	color:#4c4a48;  
}  
  
#indexteasertxt a {  
	text-decoration:none;  
	color:#4c4a48;  
	text-decoration:underline;  
}  
  
#teaser {  
	width:1024px;  
	margin-left:58px;  
	margin-top:24px;  
}  
  
#teaserleft {  
	width:272px;  
	height:116px;  
	margin-left:0px;  
	margin-top:0px;  
	background-color:#f5821f;  
	-moz-border-radius:10px;  
	-khtml-border-radius:10px;  
	float:left;  
}  
  
#indexteaserlefttxt {  
	margin-left:20px;  
	margin-right:20px;  
	float:left;  
}  
  
#companyteaserlefttxt {  
	margin-left:20px;  
	margin-right:20px;  
	float:left;  
}  
  
#arrow {  
	margin-top:-24px;  
	margin-left:60px;  
}  
  
#teasercenter {  
	width:273px;  
	height:116px;  
	margin-left:44px;  
	margin-top:0px;  
	background-color:#f5821f;  
	-moz-border-radius:10px;  
	-khtml-border-radius:10px;  
	float:left;  
}  
  
#indexteasercentertxt {  
	margin-left:20px;  
	margin-right:20px;  
	float:left;  
}  
  
#indexteasercentertxt a {  
	text-decoration:none;  
	color:#FFFFFF;  
	text-decoration:underline;	  
}  
  
#companyteasercentertxt {  
	margin-left:20px;  
	margin-right:20px;  
	float:left;  
}  
  
#companyteasercentertxt a {  
	text-decoration:none;  
	color:#FFFFFF;  
	text-decoration:underline;	  
}  
  
#teaserright {  
	width:272px;  
	height:116px;  
	margin-left:44px;  
	margin-top:0px;  
	background-color:#f5821f;  
	-moz-border-radius:10px;  
	-khtml-border-radius:10px;;  
	float:left;  
}  
  
#indexteaserrighttxt {  
	margin-left:20px;  
	margin-right:20px;  
	text-decoration:none;  
}  
  
#indexteaserrighttxt a {  
	text-decoration:none;  
	color:#FFFFFF;  
	text-decoration:underline;	  
}  
  
#companyteaserrighttxt {  
	margin-left:20px;  
	margin-right:20px;  
}  
  
#companyteaserrighttxt a {  
	text-decoration:none;  
	color:#FFFFFF;  
	text-decoration:underline;	  
}  
  
#footer {  
	width:1024px;  
	margin-left:58px;  
}  
  
#language {  
	width:136px;  
	height:19px;  
	margin-top:19px;;  
	background-image:url(pics/language.png);  
	background-repeat:no-repeat;  
	float:left;  
}  
  
#stuff {  
	margin-left:201px;  
	margin-top:21px;  
}  
  
ul#differentthings {  
	margin: 0px;  
	padding: 0px;  
	padding-left:0px;  
	margin-left:420px;  
}  
  
#differentthings li {  
	display: block;  
	float: left;  
	margin-top:20px;  
}  
  
#differentthings li a{  
	margin-top: 0px;  
	padding-top: 0px;  
	margin-right: 30px;  
	display: block;  
	height: 27px;  
	font-family: verdana;  
	font-size:12px;  
	color: #020202;  
	text-decoration: none;  
}  
  
#companycontainer {  
	margin:auto;  
	width:1024px;  
}  
  
#company #company_menu {  
	background-color: #f38628;  
	background-image: none;  
}

[bleicher]

Grüße,
entweder verzeichte auf das posten von unnötigen teilen oder hoste es irgendwo - (versuchs mit Opera Unite wenn du es einfach haben willst)

css sieht auf den ersten blick nicht falsch aus, aber die sortierung hängt auch von den elementen ab (http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index bei "BEachten Sie") - versuchs mit z-index 1 und 200 o.ä.
MFG
bleicher

[Tino]

Opera Unit kannte ich bisher noch nicht. Nettes tool :-) Habe die CSS mal hochgeladen. (siehe beigefügte URL) --> für etwaige Unannehmlichkeiten wegen der Codelänge entschuldige ich mich. Ich wusste mir nicht anders zu helfen. Kommt nicht wieder vor.

An den Tipp mit denen höheren Zahlen (Bsp. 200) habe ich natürlich vorher schon probiert. Leider ohne positives Ergebnis.

Könnte es vll. daran liegen, dass ich ich die Positionierung als "position:relative;" angegeben habe?

Andere Tipps/Vorschläge/Anregungen?

[Edgar Ehritt]

Hallo Tino,

Könnte es vll. daran liegen, dass ich ich die Positionierung als "position:relative;" angegeben habe?

Opera, Mozilla und Konqueror haben mit dieser Angabe kein Problem. Nun kommt es vielmehr darauf an, wie Alles in Allem aussieht (HTML && CSS). Unter dem oben angegebenen Verweis jedenfalls ist gar nicht zu finden. Vielleicht wäre die leichtest Methode dann doch ein erreichbarer Webspace?

Gruß aus Berlin!
eddi

[Tino]

Hallo,

musste auch gerade feststellen, dass ich Opera Unit wohl noch nicht ganz im Griff habe.

Habe die Dateien jetzt mal gezippt und auf einem Webspace hochgeladen (siehe URL)

Danke für die Unterstützung.

[Der Martin]

Hi,

Habe die Dateien jetzt mal gezippt und auf einem Webspace hochgeladen (siehe URL)

wieso gezippt? Das ist doch Murks, so kann man sich das doch wieder nicht online ansehen! Ganz normal online verfügbar machen, das wäre das beste. Nicht irgendwelche Verrenkungen ...

Ciao,
 Martin

[Tino]

Ich habs! :-) Ist eben doch etwas dran, dass man über ein Problem mal eine Nacht schlafen sollte.

Wie unter SELFHTML zu lesen ist, braucht das Attribut z-index das Attribut position um angewendet werden zu können. Mein Fehler war, dass ich das Attribut position mit dem Wert "relative" angegeben habe. Damit scheint das ebenfalls nicht zu funktionieren. Mit dem Wert position:static; erziele ich jedoch den gewünschten Erfolg.

--> Der Teufel ist ein Eichhörnchen ;-)

Trotzdem danke für euer Engagement!

[MudGuard]

Hi,

Wie unter SELFHTML zu lesen ist, braucht das Attribut z-index das Attribut position um angewendet werden zu können.

Falsch. z-index wirkt nur auf positionierte Elemente.

Jedes Element hat immer auch die Eigenschaft position (sofern nicht anders angegeben hat diese den Wert static).
Ein Element gilt als "positioniert", wenn es für die Eigenschaft position einen von static abweichenden Wert hat.

Mein Fehler war, dass ich das Attribut position mit dem Wert "relative" angegeben habe. Damit scheint das ebenfalls nicht zu funktionieren. Mit dem Wert position:static; erziele ich jedoch den gewünschten Erfolg.

Kaum vorstellbar, denn gerade bei position:static darf sich z-index nicht auswirken.

Da Du es bisher nicht geschafft hast, ein nachvollziehbares online-Beispiel mit dem Problem bereitzustellen, kann hier keiner nachvollziehen, was wirklich passiert ...

cu,
Andreas

[ChrisB]

Hi,

Mein Fehler war, dass ich das Attribut position mit dem Wert "relative" angegeben habe. Damit scheint das ebenfalls nicht zu funktionieren. Mit dem Wert position:static; erziele ich jedoch den gewünschten Erfolg.

Kaum vorstellbar, denn gerade bei position:static darf sich z-index nicht auswirken.

Dann hat er jetzt damit vermutlich eine unsinnige z-index-Angabe unwirksam gemacht, und damit sieht es jetzt so aus, wie gewünscht ...

MfG ChrisB

[bleicher]

Grüße,
O_o
1)opera unite laufen lassen
2)server starten
3)rechtsclick->eigenschaften, den ordner mit deiner index.html mit dem beispielcode auswählen
4)hier verlinken

MFG
bleicher

[Gunnar Bittersmann]

@@Tino:

nuqneH

Hast du den Stapelkontext beachtet? [CSS2 §9.9.1]

#indexteaser {
        width:264px;
        height:111px;
        margin-top:280px;
        background-image:url(pics/indexteaser.png);
        border:thin;
        border-color:#000000;
        -moz-border-radius:10px;
        -khtml-border-radius:10px;

Das würde ich um
   border-radius:10px;
ergänzen (an mehreren Stellen im Stylesheet).

style="filter:alpha(opacity=80);"
        style="-moz-opacity:0.8;"
        style="opacity:0.8;"
}

Was bitte soll das denn? Den CSS-Validator kennst du?

'-moz-opacity' ist überflüssig; Firefox versteht 'opacity'.

Qapla'

[MudGuard]

Hi,

'-moz-opacity' ist überflüssig; Firefox versteht 'opacity'.

War da nicht sogar was, daß im 3.5er -moz-opacity (endlich) rausfliegt?

cu,
Andreas