✔ z-index : 1 Problem

Status
Nicht offen für weitere Antworten.
son gohan

son gohan

Erfahrenes Mitglied
Hallo,

ich habe mir gerade etwas gepastelt aber komme mit meinen CSS Kentnissen nicht mehr weiter.

In der Seite habe ich zwei Divs gefloatet und und ein Div mit margin gesetzt. Die zwei gefoateten Divs habe ich allerdings noch einen negativen Absatnd von oben gegeben, damit sich alles in einer Reihe befindet.

Wieso ich aber nicht direkt alle drei Divs gefloatet habe, hat den Grund, das ich eine Überschrift gesetzt habe, welche in die beiden gefloateten Divs überdecken soll.

Also es ist etwas schwer zu erklären, aber vielleicht kann sich das mal jemand ansehen.

Auf jeden will ich halt nur das die Eigenschaft z-index richtig angenommen wird und in dem Beispiel ist das irgendwie nicht der Fall. Das Div mit z-index:3, welches mit margin gesetzt ist, müsste ja vor allen anderen liegen, das tut es aber nicht.

Woran liegt das, vielleicht am floaten und margin setzen?

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>ooo</title>
</head>
<body style="background-color:#fff;text-align:center;">

<div style="margin:0 auto;width:auto;text-align:center;background-color:#FFFF00;">
 

<div style="
z-index : 3;
margin-left:22%;
padding : 0;
width:auto;
height : 100px;">
<h1 style="font-weight:bold;font-size:1.2em;">z-index : 3; z-index : 3;<br /><span style="display:block;padding-left:180px;">z-index : 3; z-index : 3;</span></h1>
</div>

<div style="
z-index : 2;
float:right;
margin-top : -100px;
margin-right : 10px;
height : 90px;
width:207;
padding-top : 0px;
border: 1px solid green;
background-color:#009F00;"><b>z-index : 2;</b><br></div>
 

<div style="
z-index : 1;
float:left;
margin-top : -250px;
margin-left : 5px;
height : 100px;
padding-top : 150px;">
<div style="display:block;margin-bottom:5px;width:300px;background-color:#BF0000;">
z-index :1;</div>
</div>
<br style="clear:both;" />
<div>
 

</div>
</body>
</html>

gruß
feh
 
Soviel ich weiß, wird die z-index-Eigenschaft bei der Darstellung nur dann berücksichtigt, wenn das betreffende Element nicht den position-Eigenschaftswert static besitzt, welches der Standardwert ist.

Folgendes funktioniert beispielsweise:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
	<title></title>
	<style type="text/css">
	<!--/*--><![CDATA[/*><!--*/
	body {
		text-align:			center;
	}
	#container {
		position:			relative;
		width:				80%;
		margin:				0 auto;
		text-align:			left;
		background-color:		#fe0;
	}
	#x {
		z-index:			3;
		margin:				0 5%;
		background-color:		#f66;
	}
	#y {
		z-index:			2;
		position:			absolute;
		top:				10%;
		left:				0;
		width:				25%;
		background-color:		#6f6;
	}
	#z {
		z-index:			1;
		position:			absolute;
		top:				10%;
		right:				0;
		width:				25%;
		background-color:		#66f;
	}
	.bla {
		height:				10em;
		color:				#000;
		border:				dotted #aaa;
		filter:				alpha(opacity=75);
		-moz-opacity:			.75;
	}
	/*]]>*/-->
	</style>
</head>

<body>
<div id="container">
	<div id="x" class="bla">Container 1</div>
	<div id="y" class="bla">Container 2</div>
	<div id="z" class="bla">Container 3</div>
</div>
</body>
</html>
 
Hallo Gumbo,

vielen Dank, eine schöne Lösung hast du mir gegeben. Aber es läuft nicht so wie ich es mir vorstelle.

Ich will in deinem Beispiel den Container 3 hinter dem Container 1 verschwinden lassen, wie gehts das? Wenn ich dem Beispiel dem Container 1 einen größeren z-index als dem Container 3 gebe müsste es doch theoretisch gesehen funktionieren?
 
Gib' dem DIV position: relative, und es funktioniert mit dem z-index:

HTML: 
<div style="position:relative; z-index:3; margin-left:22%; padding:0; width:auto; height:100px;">

 <h1 style="font-weight:bold;font-size:1.2em;">z-index : 3; z-index : 3;<br /><span style="display:block;padding-left:180px;">z-index : 3; z-index : 3;</span></h1>

</div>
 
Hallo maik,

vielen Dank, du überraschst mich immer wieder es klappt. Aber auch dir nochmal dank lieber Gumbo, weil die Lösung recht interessant ist für andere Seiten zum Ausprobieren.

grüße
feh
 
Es funktioniert auch praktisch: Weise „Container 1“ einfach die Eigenschaft position:relative zu und passe die z-index-Eigenschaften entsprechend an.
 
Hallo Gumbo,

andere Frage, habe an deinem Beispiel weiter gebaut und eine neue Frage bei der du mir vielleicht helfen kannst.

Ich habe jetzt einfach mal drei Divs untereinander gesetzt mit position absolute, da die Homepage später im Prinzip auch nur aus drei Teilen besteht passt das ganz gut mit position absolute.

Dann habe ich überlegt ob ich dem ganzen irgendwie runde ecken geben kann. Dank einer Methode von Stu kann man das eigentlich, nur bei dieser Konstruktion mit position absolute Werten habe ich Probleme damit. Ansonsten habe ich nämlich sonst einfach ein Kasten mit runden ecken gemacht und in den Kasten die Homepage gelegt, wen du verstehtst.

Im folgenden Beispiel mit position absolute würde ich gerne auch eine Lösung finden:

PHP: 
 <!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>o</title>

 <style type="text/css">
 <!--/*--><![CDATA[/*><!--*/
 body {
  text-align:   center;
				 background-image: url(../../../NP-K.de/gif/bgx.gif);
 }
 #container {
  position:   relative;
  width:	808px;
  margin:	0 auto;
  text-align:   left;
  background-color:  #fff;
 }
 #x {
				 position:   absolute;
  z-index:   3;
				 top:	0;
  left:	0;
  width:	808px;
				 height:	293px;
  background-color:  #fff;
 }
 #y {
  z-index:   2;
  position:   absolute;
  top:	293px;
  left:	0;
				 height:	700px;
  width:	808px;
  background-color:  #fff;
 }
 #z {
  z-index:   1;
  position:   absolute;
  top:	990px;
  right:	0;
				 height:	65px;
  width:	808px;
  background-color:  #fff;
 }
		  /* rund*/
#xsnazzy {background: transparent;width:808px;margin:0 auto; }
.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#FFFFFF; border-left:1px solid #4F4F4F; border-right:1px solid #4F4F4F;}
.xb1 {margin:0 5px; background:#4F4F4F;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}
.xboxcontent {display:block;  background:#FFFFFF; border:0 solid #4F4F4F; border-width:0 1px;}

 /*]]>*/-->
 </style>
</head>
<body>

<div id="container">
<div id="x">293px hoch</div>
<div id="y">700px hoch
<br />
<br />
<div id="xsnazzy">
<span class="xtop"><span class="xb1">&nbsp;</span><span class="xb2">&nbsp;</span><span class="xb3">&nbsp;</span><span class="xb4">&nbsp;</span></span>
<div class="xboxcontent">runde ecke</div>
<span class="xbottom"><span class="xb4">&nbsp;</span><span class="xb3">&nbsp;</span><span class="xb2">&nbsp;</span><span class="xb1">&nbsp;</span></span>
</div>
</div>
<div id="z">65px hoch</div>

</div>
 
 

</body>
</html>
gruß
feh
 
Hi,

also ich hatte an folgendes gedacht:

(---------------------------------------------------)

Menü und Links

----------------------------------------------------

etwas content

----------------------------------------------------

footer
(---------------------------------------------------)

Drei Hauptdivs die die Homepage bilden. Der Hintergrund komplett weis damit keine Nahtstellen zu sehen sind. Das ganze halt mit position absolute gesetzt damit ich den lynux Viewer gegebenenfalls guten Text direkt am Anfang des Quellcodes servieren kann. Und zusätzlich 1% padding im body bereich und alles mittig centriert mit 800 px Breite.

Naja, das ganze läst sich ja leicht aufbauen mit Divs aber nicht wen man die drei Teile mit absoluten Werten setzt.
 
feh hat gesagt.:
Das ganze halt mit position absolute gesetzt damit ich den lynux Viewer gegebenenfalls guten Text direkt am Anfang des Quellcodes servieren kann.
Zum Vergrößern anklicken....
Was hat denn CSS (absolute Positionierung der DIVs) mit der 'Zugriffsgeschwindigkeit' auf ein xHTML-Dokument bzw. dessen Inhalte zu tun? :suspekt:

Entscheidend ist doch, wo das DIV mit dem ggfs. guten Text innerhalb von <body> </body> notiert wird. Ganz oben zu Seitenbeginn, oder ganz unten am Seitenende.



[ editpost 11:49 ] Lösungsvorschlag:

Wenn die drei DIVs (#x, #y, #z) mit festen Höhen untereinander angezeigt werden, sind absolute Positionsangaben hinfällig / überflüssig, da sich die Positionen durch die Höhenangaben ja automatisch ergeben, oder? Hab sie aus diesem Grund mal aus dem CSS-Code entfernt und anschliessend Stu Nicholls' CSS-Modell für abgerundete Ecken snazzy borders in deinem DIV-Konstrukt installiert.

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>o</title>

<style type="text/css">
<!--/*--><![CDATA[/*><!--*/
body {
  text-align:   center;
                 background-image: url(../../../NP-K.de/gif/bgx.gif);
}
#container {
  position:   relative;
  width:    808px;
  margin:    0 auto;
  text-align:   left;
  background-color:  #fff;
}
#x {
  height:    293px;
  background-color:  #fff;
}
#y {
  height:    700px;
  background-color:  #fff;
}
#z {
  height: 65px;
  background-color:  #fff;
}
          /* rund*/
#xsnazzy {background:transparent; margin:0; padding:0; }
.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#FFFFFF; border-left:1px solid #4F4F4F; border-right:1px solid #4F4F4F;}
.xb1 {margin:0 5px; background:#4F4F4F;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}
.xboxcontent {display:block; background:#FFFFFF; border:0 solid #4F4F4F; border-width:0 1px; }

/*]]>*/-->
</style>
</head>
<body>

<div id="container">

<div id="xsnazzy">
<span class="xtop"><span class="xb1">&nbsp;</span><span class="xb2">&nbsp;</span><span class="xb3">&nbsp;</span><span class="xb4">&nbsp;</span></span>
  <div class="xboxcontent">
     <div id="x">293px hoch</div>
     <div id="y">700px hoch</div>
     <div id="z">65px hoch</div>
  </div>
<span class="xbottom"><span class="xb4">&nbsp;</span><span class="xb3">&nbsp;</span><span class="xb2">&nbsp;</span><span class="xb1">&nbsp;</span></span>
</div>

</div>

</body>
</html>
  • Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 7.23
 
Zuletzt bearbeitet von einem Moderator:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück