[css] z-index plaatst block elements in verkeerde volgorde

[Dark Blue]

Hallo all. Ik wilde eigenlijk geen topic openen maar ik doe het nu toch, want ik word hier helemaal tureluurs van. Ik heb al wat topics doorgelezen, wat wijzigingen doorgevoerd (zie verderop) en ook over wat bugs gelezen. Mijn probleem seems to stay...

Mijn probleem is, dat ik een aantal absoluut gepositioneerde div's in een pagina heb staan. Omdat ze netjes boven op elkaar gestapeld moeten worden, heb ik ze z-indexes meegegeven. Soms volgen de elementen elkaar op, soms nesten ze in elkaar. In Firefox gaat alles goed, in IE 6 gaat het mis.

Ik gebruik het transparent PNG-script wat wel vaker gebruikt wordt dat dus de alpha-transparency in een IMG aanspreekt, zodat zowel Fx als IE6 het goed weergeven. Dit heeft tot dusver nog nooit tot problemen met z-indexes geleid.

Hier staat de site:
http://conceptdesign.kuns...ple/index.php?page=studie

Dit is de...

Cascading Stylesheet:

html {
overflow:hidden;
}
body {
background-color:#BBBBBB;
background-image:url(uploads/gfx/pagebg.jpg);
background-repeat:repeat-x;
font-size:1em;
height:100%;
margin:0px;
}
.column {
background-color:#BBBBBB;
background-image:url(uploads/gfx/columnbg.jpg);
height:100%;
left:50%;
margin-left:-400px;
position:absolute;
width:800px;
z-index:10;
}
.block {
background-color:#000000;
background-image:url(uploads/gfx/pagebg.jpg);
height:470px;
position:absolute;
width:800px;
z-index:20;
}
.container {
background-color:#FFFFFF;
height:420px;
left:20px;
position:absolute;
top:50px;
width:760px;
z-index:30;
}
.schaduw {
height:30px;
left:50%;
margin-left:-511px;
position:absolute;
top:455px;
width:1022px;
z-index:40;
}
.heading {
background-color:#C4F21D;
height:52px;
left:5px;
position:absolute;
top:5px;
width:750px;
z-index:50;
}
h1 {
color:#FFFFFF;
font-family:Verdana,sans-serif;
font-size:2em;
line-height:52px;
margin:0px 0px 0px 85px;
padding:0px;
}
.logo {
height:92px;
left:50%;
margin-left:139px;
position:absolute;
top:66px;
width:236px;
z-index:60;
}
.menu {
font-size:0.7em;
height:305px;
left:40px;
overflow:auto;
position:absolute;
top:109px;
width:165px;
z-index:50;
}
.wolkshade {
left:5px;
position:absolute;
top:50px;
z-index:60;
}
.wolk {
left:25px;
position:absolute;
top:2px;
z-index:70;
}
.contentshade {
left:167px;
position:absolute;
top:105px;
z-index:60;
}
.content {
background-color:#FFFFFF;
color:#000000;
display:block;
font-family:Verdana,sans-serif;
font-size:0.7em;
height:313px;
left:195px;
overflow:auto;
padding:5px;
position:absolute;
text-align:justify;
top:109px;
width:393px;
z-index:70;
}
.fotoboven {
background-color:yellow;
height:160px;
left:600px;
overflow:hidden;
position:absolute;
top:119px;
width:160px;
z-index:50;
}
.fotoonder {
background-color:lime;
height:127px;
left:600px;
overflow:hidden;
position:absolute;
top:292px;
width:160px;
z-index:60;
}
.fotoframe {
left:600px;
position:absolute;
top:107px;
z-index:70;
}

Wat een onmeunig lang stuk, maargoed. Zoals je ziet heb ik overal z-indexes aan gegeven.
Wat de bedoeling is, is dat de class 'shadow' - dat is de brede schaduw die je onder zeg maar het 'witte kaartje' (class container) ziet, vóór/achter container staat, maar áchter 'content'.

Hij heeft een lagere z-index dan de class content, dus ik denk: dat gaat goed. Ging ik eerste instantie in Fx ook goed, maar in IE6 was het vanaf het begin al hommeles. Ik heb wat zitten schuiven en alle z-waarden eens opgeschoond, css in logische volgorde neergezet, maar hij vertikt het - nu ook al in Fx!

Kan iemand mij vertellen waarom die class shadow zich vóór alles wurmt?

- ik heb de css al in logische volgorde gelist
- ik heb de z-indexes opnieuw waarden toegekend zodat ze nu logisch oplopen
- ik heb alle block elements een position: absolute gegeven ook al waren sommige 'relative'
- ik heb een pagina van crisp gelezen waarop hij een IE6 z-index bug uitlegt. Ik heb geen idee of dat op mijn pagina van toepassing is.
- waarom knip ik dat gat niet uit het plaatje? omdat de content ook wel eens een andere breedte heeft en ik gewoon 1 shadow-plaatje in al mijn templates wil (kunnen) gebruiken.

De pagina moet nog verder afgemaakt worden, maar dat komt allemaal op z'n tijd nadat ik dit probleem heb opgelost.

Bij voorbaat dank...

[Geert.H]

Volgens mij komt het omdat content in de container div staat. De container div heeft z-index 30 en de schaduw z-index 40. De schaduw gaat dus voor álles wat in de container zit.

Oplossing heb ik eigenlijk niet echt, misschien iemand anders.

edit:
Misschien toch wel.
Wat je zou kunnen doen is de schaduw img alleen laat bestaan uit schaduw. En die laat je ook achter de container vallen. De bodem van de container geef je dan een andere afbeelding mee.
Ik hoop dat je een beetje snapt wat ik bedoel, zeg het namelijk nogal vaag volgens mij. Komt erop neer dat je creatief moet slicen

edit II:
Ik heb even lopen rotzooien (je moet als TKT'ers elkaar toch een beetje helpen). Het heeft inderdaad te maken met het feit dat de schaduw z-index:40 heeft en dat de rest z-index:10. Waarom de rest z-index 10? Omdat de rest allemaal in #column staat. Ik heb de schaduw z-index 10 gegeven en de #column z-index:11;
Als je dan vervolgens #column net zo hoog maakt als #block (470px) dan heb je het effect wat jij wilt.

Succes verder ermee

[ Voor 84% gewijzigd door Geert.H op 17-10-2007 12:37 ]

[Dark Blue]

Hoebie!!! Dankje Geert - ik wist niet eens dat jij TKT'er was

Wat heb ik gedaan: Inderdaad, wat je zegt: alles binnen de div 'container' valt onder de schaduw omdat die 30 is. Ik heb hier Firebug geïnstalleerd staan en had even snel jouw stappen gevolgd. Inderdaad, dan werkt het, maar dan ben ik de schaduw kwijt voor het stukje waar de background van column hem overlapt. Dat was niet zo tof. Door column 470px te maken was dat verholpen, maar die is juist zolang omdat er een enorme reflectie van container in staat. Omdat de content-div en de 2 fotootjes rechts die reflectie wel houden, wilde ik die voor de grote container niet schrappen.

Wat heb ik nu gedaan:
Ik heb eens goed gekeken naar de meerwaarde van een zo brede schaduw. Deze heb ik ooit realistisch nagemaakt van een 3d-render. Hij viel daarom buiten column, in de variabele zijranden. De schaduwtjes van de container en de fotootjes zijn gewoon uit de losse hand gemaakt die zijn veel smaller en die lijken óók goed.

Dus heb ik nu de schaduw zo smal gemaakt dat hij binnen column valt. Hij staat in de HTML nu ook binnen block. Er was nog wel wat plek.
Ik hem hem nu een mooie z-index van 25 (ik blijf corrigeren, echter, 15 of 25, both works) gegeven; mooi bovenop block, maar achter container. Joepie!

Hartstikke bedankt voor je inzicht, nu kan ik weer lekker verder frøbelen!