[IE6] Enorm irritant probleem met z-index

maandag 28 november 2011 09:42

Acties:

0 Henk 'm!

Topicstarter

Beste mensen,

Ik moet helaas van me werk nog IE6 ondersteunen. Nu kan ik om de meeste IE6 fouten wel redelijk heen werken, maar ben nu een hele dag bezig met het zoeken naar een oplossing voor het onderstaande probleem.

Ik heb twee divjes onder elkaar. In het bovenste divje zit een child divje, die absoluut gepositioneerd is, en onder andere over het onderste divje heen moet vallen.

Echter dit werkt niet zomaar, want (denk ik) doordat divje2 na divje1 in de DOM staat wordt deze over div1 (en zijn childs) heen getekend.

Door het toevoegen van een z-index op het child divje in div1 werkt het in alle browsers. Behalve IE6.

Dit krijg ik niet gefixed.

Ik heb een testcase gemaakt:
of eigenlijk het betreffende stuk code uit mijn applicatie gestript, en dit bleef over:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        * {
            margin:0;
            padding:0;
        }
        
        .divA {
            position: relative;
            background-color: red;
            height: 30px;
            margin-bottom: 10px;
        }
        
        .divB {
            position: absolute;

            height: 200px;
            width: 100px;
            left: 15px;
            top: 15px;

            background-color: blue;
            z-index: 999;
        }
    </style>
</head>
<body>
    <div class="divA">
        <div class="divB"></div>
    </div>
    <div class="divA"></div>
</body>
</html>

Heeft iemand nog een idee dat ik zou kunnen proberen?

This message was sent on 100% recyclable electrons.

maandag 28 november 2011 09:47

Acties:

0 Henk 'm!

Mr. Awesome

Vroeger hyptonize

Volgens mij werkt z-index in IE6 alleen als minstens 2 divjes een z-index hebben.

Misschien heb je hier wat aan:
http://annevankesteren.nl/2005/06/z-index

maandag 28 november 2011 10:01

Acties:

0 Henk 'm!

BasieP

Topicstarter

hyptonize schreef op maandag 28 november 2011 @ 09:47:
Volgens mij werkt z-index in IE6 alleen als minstens 2 divjes een z-index hebben.

Misschien heb je hier wat aan:
http://annevankesteren.nl/2005/06/z-index

Ik vind het verhaal wat onduidelijk. Bovendien lost het toevoegen van eenzelfde z-index op mijn parent div mijn probleem niet op.

Het verschil zit hem denk ik in het feit dat in jouw voorbeeld er maar 1 DOM takis. (ul->li->ul)
bij mij zijn er twee, waarbij iets uit tak 1 (div->div) over het divje uit tak2 (div) moet komen.

http://stackoverflow.com/...ie-6-ie-7-z-index-problem
^^ dit verhaal (niet het antwoord, maar die lap tekst er onder) is veel duidelijker. Ik krijg het nu in mijn testcase gefixed door op de bovenste DivA een z-index van 99 te zetten, en op de onderste eentje die lager is (98)

De z-index op DivB is compleet irrelevant

[ Voor 22% gewijzigd door BasieP op 28-11-2011 10:03 ]

This message was sent on 100% recyclable electrons.

maandag 28 november 2011 10:25

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

Het probleem is dat "divB" nooit een hogere z-index kan hebben dan zijn parent (in IE(6)) en aangezien die er geen heeft, werkt het niet.

Oplossing is de parent van "divB" een z-index te geven hoger dan die van je tweede div: http://jsfiddle.net/okke/Bbfzw/

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

maandag 28 november 2011 10:46

Acties:

0 Henk 'm!

BasieP

Topicstarter

OkkE schreef op maandag 28 november 2011 @ 10:25:
Het probleem is dat "divB" nooit een hogere z-index kan hebben dan zijn parent (in IE(6)) en aangezien die er geen heeft, werkt het niet.

Oplossing is de parent van "divB" een z-index te geven hoger dan die van je tweede div: http://jsfiddle.net/okke/Bbfzw/

Ja inderdaad. De child (divB) doet er dan al niet meer toe, aangezien de tweede DivA geen hogere childs heeft dan de eerste DivA.

Ik zat gewoon het verkeerde element te z-indexen...

This message was sent on 100% recyclable electrons.

woensdag 30 november 2011 12:00

Acties:

0 Henk 'm!

com2,1ghz

Position absolute probeer ik zelf te vermijden en alleen te gebruiken als het echt nodig is om iets ergens op een vaste positie te kunnen tonen. Als ik toch wil knoeien met overlappende divs, dan gebruik ik negatieve margins. Dat heeft naar mijn ervaring altijd goed gewerkt icm meerdere browsers. Hierdoor zit alle div containers op de jusite plek maar je duwt de div dan over een andere div heen.

Ook met z-index-en wil ik nooit mee werken. Ieder browser gaat hier anders mee om en daar krijg je echt hoofdpijn van.

woensdag 30 november 2011 13:05

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Css

com2,1ghz schreef op woensdag 30 november 2011 @ 12:00:
Position absolute probeer ik zelf te vermijden en alleen te gebruiken als het echt nodig is om iets ergens op een vaste positie te kunnen tonen. Als ik toch wil knoeien met overlappende divs, dan gebruik ik negatieve margins. Dat heeft naar mijn ervaring altijd goed gewerkt icm meerdere browsers. Hierdoor zit alle div containers op de jusite plek maar je duwt de div dan over een andere div heen.

Ook met z-index-en wil ik nooit mee werken. Ieder browser gaat hier anders mee om en daar krijg je echt hoofdpijn van.

Z-index werkt exact hetzelfde in alle browsers. Alleen IE6/7 heeft er wat rarigheden mee in combinatie met position relative en elementen die erbuiten vallen over iets anders dat ook absoluut is gepositioneerd. (waar het topic over gaat dus).

Position relative/absolute is over het algemeen de meest veilige manier om onderdelen vast te positioneren in verhouding tot andere elementen. Stuk veiliger dan geneuzel met floats of negatieve margins.

Onderwerpen