Willkommen auf dem Portal für Mediengestalter

kassiopeia333 · Threadersteller

Hallo zusammen,

ich arbeite gerade an meiner eigenen Website und bin auf folgendes Problem gestossen: Ich habe mehrere DIVS unter anderem einen WRAPPER - in diesem ist auch ein Div für die Navigation enthalten.

Der Wrapper ist relativ positioniert und hat einen sehr hohen z-index. Die Navi ist absolut positioniert und hat z-index=0.

Trotzdem wird die Navi nicht vom Wrapper verdeckt was aufgrund des z-index ja eigentlich der Fall sein müsste.

Hat irgendjemand eine Idee ob bei den übergeordneten Divs irgendwelche Voraussetzungen erfüllt sein müssen, damit z-index funktioniert?

Das das gestappelte element position<>static haben muss, ist mir bewusst, aber ist sonst noch irgendwas zu beachten?

Vielen Dank für eure Mithilfe!

MFG

Thomas

bacon · **Verfasst** Mi 22.02.2012 22:58 **Titel**

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

pantonine · **Verfasst** Mi 22.02.2012 23:20 **Titel**

Hat der „Wrapper“ überhaupt eine Höhe? Mal den background eingefärbt? Gibts ein obnline-Beispiel? Alles sehr abstrakt.

dcn · **Verfasst** Do 23.02.2012 09:56 **Titel**

Aber wenn die Navi in dem Wrapper liegt, wie soll der Wrapper dann die Navi überdecken?
Ich kann mir doch auch nicht n Schnitzel auf den Teller legen, den Teller auf den Schrank stellen und mich wundern das das Schitzel noch aufm Teller liegt und nicht drunter - weil ja nur der Teller bewegt wurde. Oder verpeil ich da was?

Vielleicht was für dich.

kassiopeia333 · Threadersteller

Hallo zusammen,

ja der Wrapper hat eine fixe Höhe, aber das sollte hier ja keine Rolle spielen, oder?

Hier das HTML:

<body>
<div id="bg"><img src="bgfull_opt.jpg" height="100%" width="100%" /></div>
<div id="feedback"></div>
<div id="badged"><img src="badged.png" height="200" width="200" /></div><a href="mailto:%6D%61%69%6C%40%74%68%6F%6D%61%73%6D%61%75%72%65%72%2E%65%75" title="E-Mail"><div id="feedback"></div></a>
<div id="wrapper">
<div id="logo"><img src="logo_copy.png" height="205" width="181" /></div>
<div id="navi">
<ul>
<li id="aktiv"><span>Home</span></li>
<li><a href="education.html"><span>Education</span></a></li>
<li><a href="skills.html"><span>Skills</span></a></li>
<li><a href="interest.html"><span>Interest</span></a></li>
<li><a href="playground.html"><span>Playground</span></a></li>
<li><a href="mailto:%6D%61%69%6C%40%74%68%6F%6D%61%73%6D%61%75%72%65%72%2E%65%75"><span>Contact</span></a></li>
</ul>
</div>
<div id="content"><img src="profil_color.png" height="500" width="500" /><p><span>"Man kann niemanden überholen,<br />
wenn man in seine Fußstapfen tritt."<br />
(Francois Truffaut, fr. Regisseur, 1932 - 1985)</span></p></div>
</div>
</body>

-------

Und hier das relevante CSS für Wrapper und Navi:

#wrapper {
position: relative;
z-index: 10;
margin: 200px auto;
width: 920px;
height:600px;
background-color: #FFFFFF;
border: 1px solid #000000;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;}

#navi {
width: 100%;
text-align: right;
position: relative;
top: 0;
right: 20px;
z-index:3;}

#navi li{display: inline; margin-right: -15px;}

zur Erklärung: Beabsichtigt war die Navi per z-index hinter dem Wrapper zu verstecken und dann als Hove-Effekt per CSS3-Animation hevorfahren zu lassen.

Aber dazu muss sie eben zuerst mal hinter den Wrapper.

MFG

Thomas

pixelpapst303 · **Verfasst** Do 23.02.2012 10:58 **Titel**

dcn · **Verfasst** Do 23.02.2012 11:12 **Titel**

pixelpapst303 · **Verfasst** Do 23.02.2012 11:20 **Titel**

Willkommen auf dem Portal für Mediengestalter

Thema: z-index funktioniert nicht vom 22.02.2012

z-index funktioniert nicht

z-index funktioniert nicht.

Re: z-index funktioniert nicht.

Re: z-index funktioniert nicht.

Re: z-index funktioniert nicht.