✔ z-Index und Kindelemente

anhadikal

anhadikal

Mitglied
Hallo,

ich bin nun verwirrt ... Es geht um follgendes:
ich habe 3 div-Elemente:
HTML: 
<div id="div1"></div>
<div id="div2">
    <div id="div2_1"></div>
</div>

angenohmen div1 hat z-Index von 8 und div2 von 0;

Welchen z-Index muss nun div2_1 haben, damit div1 von div2_1 überlagert wird? Komischerweise klappt ein wert von 8. Ist das jedoch in allen Browser gleich?

Ich habe nun überlegt und ich dachte mir, dass es so sein könnte, dass div2_1 sein z-index zu dem z-index von div2 addiert und dieser dann für die Eben davor gültig ist? Stimmt das soweit? Ich habe nähmlich schon viele CSS-Seiten durchsucht und keinen wirkliche Methode zu der z-Index bestimmung bei Kind elementen gefunden.

MfG
 
Hi,

ein Kindelement kann keinen höheren z-index, wie sein Elternelement besitzen.

Und nein, es addiert auch nicht den "Mutter-Wert" zu seinem eigenen dazu.

mfg Maik
 
Maik hat gesagt.:
Hi,

ein Kindelement kann keinen höheren z-index, wie sein Elternelement besitzen.

Und nein, es addiert auch nicht den "Mutter-Wert" zu seinem eigenen dazu.

mfg Maik
Zum Vergrößern anklicken....

hmm, aber es scheint in FF3, IE7, Safari zu gehen ....

hier noch mein code genauer:

HTML: 
<?xml version="1.0" encoding="utf-8"?>
<!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="en" lang="en">
<head>
	<title>****</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
	<div id="page">
		<div id="pattern-top"></div><div id="ice-fire"></div>
		<div id="top">
			<a id="logo" href="http://www.s*"><span>*****</span></a>
		</div>
	</div>
</body>
</html>

dabei hat div#pattern-top einen z-Index von 8 und ist ein png mit einem scan-line ähnlichem muster. div#top hat keine z-Index aber a#logo hat einen von 9 und es überlagert pattern-top wenn z-index von a#logo unter 8 setze, dann überlagert pattern-top das logo .... wie kann man das erklähren. Das hat mich nähmlich auch verwirrt ;)

EDIT: hier noch css:
Code: 
body
{
	background-color: #000000;
	font-size: 9pt;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
div#page
{
	width: 1000px;
	height: 700px;
	padding: 0;
	border: 1px solid #484848;
	
	/* big screen only */
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -350px;
	margin-left: -500px;
}
div#top
{
	height: 98px;
	border-bottom: 1px solid #908b03;
}
div#pattern-top
{
	background: url(img/pattern-top.png) no-repeat;
	width: 1000px;
	height: 255px;
	position: absolute;
	top: 0;
	z-index: 8;
}
div#ice-fire
{
	background: url(img/ice-fire.png) no-repeat;
	width: 604px;
	height: 699px;
	position: absolute;
	bottom: 0;
	z-index: 9;
}
a#logo
{
	position: absolute;
	left: 0;
	top: 29px;
	width: 132px;
	height: 79px;
	z-index: 1024;
	background: url(img/logo.png) no-repeat;
}

MfG
 
Zuletzt bearbeitet:
Ich rede von einem Nachfolgeelement, und nicht von einem Nachbarelement.

mfg Maik
 
Maik hat gesagt.:
Ich rede vom Nachfolgeelement, und nicht von einem Nachbarelement.
Zum Vergrößern anklicken....

Ja das ist mir klar, ich rede ja auch von Nachfolgeelement/Child
pattern-top
top
->logo


somit ist top das Nachbarelement des pattern-top aber logo ist ja Child von top. Also wie veralten sich in diesem Fall die z-Indexes? Wie kann logo einen höheren z-Index haben als pattern-top? Diese haben ja nicht den selben Eltern-Element?

MfG
 
Innerhalb eines Elternelements können die Nachfolgeelemente untereinander unterschliedliche Schichtpositionen besitzen, aber nicht gegenüber der Mutterbox.

mfg Maik
 
Ja, aber die "Mutterbox" ändert sich ja ... Ich meine logo hat eine andere "Mutterbox"/Elternelement als pattern und top. Somit dürfte das garnicht gehen.

Hast du eventuell gute links parat, oder eine anschauliche erklährung mit Begriffen, die "Standalisiert" sind?

MfG

//edit

Ahh,

ich habe es nun endlich verstanden!

Das gute ist:
- ein Element, dass positioniert ist, hat eigenen "Stack Context", somit haben nicht positionierte, wie div#top keinen eigenen Stack Context, also wird der Stack Context von dem Parent genohmen => a#logo und div#patter-top sind im gleichen Stack Context => es funktioniert also:)

P.S.: IE macht da immerwieder Stress ... der bekannt ie z-index stacking context bug ;)

MfG
 
Zuletzt bearbeitet:
Nur zum Vergleich, welches Element (#pattern-box, #logo) in der Schichtpostion überlappt wird:

  • z-index:7 für #logo
CSS: 
div#top
{
        height: 98px;
        border-bottom: 1px solid #908b03;
        background:blue;
}
div#pattern-top
{
        background:green;
        width: 1000px;
        height: 255px;
        position: absolute;
        top: 0;
        z-index: 8;
}
a#logo
{
        position: absolute;
        left: 0;
        top: 29px;
        width: 132px;
        height: 79px;
        z-index: 7;
        background:red;
}
  • z-index:9 für #logo
CSS: 
div#top
{
        height: 98px;
        border-bottom: 1px solid #908b03;
        background:blue;
}
div#pattern-top
{
        background:green;
        width: 1000px;
        height: 255px;
        position: absolute;
        top: 0;
        z-index: 8;
}
a#logo
{
        position: absolute;
        left: 0;
        top: 29px;
        width: 132px;
        height: 79px;
        z-index: 9;
        background:red;
}

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück