[CSS] Relative Divs + Z-Index: Divs overlappen toch nog?

[SchizoDuckie]

Ik ben momenteel bezig met het testen van een <ul> based menu met submenu's, en loop tegen het volgende probleem aan:

De submenu's komen wel netjes boven hun eigen parent te staan, maar de het volgende menuitem overlapt keihard het submenu weer, waardoor hier de helft van wegvalt. Uiteraard heb ik al gerommeld met de z-indexen, maar het mag allemaal niet uitmaken..

Demo is te vinden op: http://www.schizofreend.nl/csstest/

Nou ben ik na een aantal jaar nog steeds de quirks van CSS onder de knie aan't krijgen, en dit is er weer zoeen die ik niet snap.

Kan iemand me uitleggen waarom deze z-index niet goed werkt?

[crisp]

relative = relative en z-index doet daar niets mee; z-index is alleen van belang bij absolute geplaatste elementen.

[Grijze Vos]

Ik zou eens firefox downloaden als ik jou was. Want daar ziet het compleet anders uit dan in IE.

[SchizoDuckie]

crisp schreef op 06 maart 2004 @ 19:53:
relative = relative en z-index doet daar niets mee; z-index is alleen van belang bij absolute geplaatste elementen.

En dit geldt ook voor absolute gepositionde elementen met een relative parent?

Grijze Vos schreef op 06 maart 2004 @ 19:56:
Ik zou eens firefox downloaden als ik jou was. Want daar ziet het compleet anders uit dan in IE.

Weet ik. Boeit niet, het is voor een IE Only app

[ Voor 31% gewijzigd door SchizoDuckie op 06-03-2004 20:01 ]

[Grijze Vos]

En wat als je nou over een tijd een app moet maken die hetzelfde moet doen maar crossbrowser is? In dat geval moet je opnieuw aan de slag, doe je het in 1x goed, ben je meteen klaar.

[SchizoDuckie]

Grijze Vos schreef op 06 maart 2004 @ 20:10:
En wat als je nou over een tijd een app moet maken die hetzelfde moet doen maar crossbrowser is? In dat geval moet je opnieuw aan de slag, doe je het in 1x goed, ben je meteen klaar.

Daar gaat deze discussie nu niet over. maar als je het echt wil weten: Ik kan momenteel even niet de uren verantwoorden die het kost om alles x-browser te maken.


[edit]
in Clay z'n CSS Hover demo werkt het zelfde principe wel... Ik vraag me momenteel alleen héél erg af waarom, want in principe doen we exact hetzelfde zo op het eerste gezicht.

Ik ga ff z'n css uitspitten.

[ Voor 26% gewijzigd door SchizoDuckie op 06-03-2004 20:16 ]

[Clay]

z-index geldt overal voor, maar je kan iets dat in de flow zit niet over iets heen krijgen dat absolute is (als het samen in dezelfde parent zit). Ook heeft elke node een eigen z-index stack;

stel:

code:

<ul>
   <li> hoi1 </li>
   <li> hoi2 </li>
</li>

als de li van hoi1 nu z-index 1 heeft, en die van hoi2 2, dan is het onmogelijk om een genest element bij hoi1 over iets in hoi2 te krijgen. hun parents staan dat niet meer toe.

Wat ik in de hover demo gedaan heb is alles een z-index van n geven, en de li waar je op hovert krijg even z-index n+1. dan komt alles wat daarin genest is over de volgende menuitems heen.

[SchizoDuckie]

Clay schreef op 06 maart 2004 @ 20:26:
Wat ik in de hover demo gedaan heb is alles een z-index van n geven, en de li waar je op hovert krijg even z-index n+1. dan komt alles wat daarin genest is over de volgende menuitems heen.

aaah gewoon weer een dikke hack dus
thx voor je hulp! ik ga weer verder rommelen

[Clay]

weer een dikke hack?

Ik zie helemaal nergens een hack zo werkt het gewoon, en hoezo "weer", wat was de vorige hack dan?

[Verwijderd]

Daar gaat deze discussie nu niet over. maar als je het echt wil weten: Ik kan momenteel even niet de uren verantwoorden die het kost om alles x-browser te maken.

Tijd besparen doe je meestal door iets te testen in een browser waarvan je weet dat de 'output' correct is, niet in een browser waarvan de uitwerking onverwacht is, wat gevolgen kan hebben voor jouw interpretatie van de manier waarop CSS werkt.