Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

[CSS] Z-index, t.o.v. wat?

None
8 antwoorden
  • De vraag in het kort:
    Als ik een element een z-index wil toekennen dan dient het ook gepositioneerd te zijn. Maar welke elementen worden nu tot de "totale z-index" gerekend? oftewel welke elementen worden t.o.v. elkaar vergeleken? Alle elementen op de pagina, of alleen de andere gepositioneerde elementen?

    De lange versie:
    Ik ben nu al een weekje aan het klooien met een paar rolloverbuttons en het wil niet echt lukken. Twee dingen zijn daarbij van belang: het is volledig CSS (dus geen javascript) en de rollover button is groter dan de originele. Dit om een effect te bereiken alsof de button 'naar voren' springt. De grote versie dient daarbij anders te worden gepositioneerd dan de kleine versie, omdat de browser de linkerbovenhoek hetzelfde houdt (en de button dus naar linksonder lijkt te springen)

    Uiteraard had ik aanvankelijk verschillen in IE en FF, maar na een paar dagen had ik dat redelijk (maar niet helemaal) hetzelfde. Nu is het nog een kleine issue in FF, maar vooral Opera waar het helemaal fout gaat.

    Het probleem: De buttons staan in een hoofd container. De linkerbutton gaat bij een rollover buiteen de grenzen van de hoofdcontainer en wordt daar "afgesneden". Althans, in FF en Opera. (Niet in IE, maar dat is niet van belang.) Ik ben al met de overflow van de hoofdcontainer aan de gang geweest, maar niks helpt. Hier denk ik dus aan de z-index die hoger moet zijn dan die van de hoofdcontainer, maar omdat die niet gepositioneerd is heeft die zelf geen z-index. Wellicht daarom dat de z-index van de button niks uitmaakt(?)

    Verder had ik de rollover in eerste instantie met een negatieve marge gepositioneerd, maar daarmee gooide hij de hele rest van de site overhoop. Zodra ik mijn muis over de button heen bewoog werkte de buttons prima, maar de hele rest van de layout, floatende divs, sprongen naar beneden. Ik heb toen de marge laten varen en de rollover relatief gepositioneerd. Toen ging het goed in IE en FF, maar Opera blijft de divs rondgooien. (een verschil tussen FF en Opera, dat is dan weer wel interessant)

    Ik begin er een beetje niks meer van te begrijpen. Gelukkig heb ik nog heel veel over CSS te leren, dus ik weet dat ik nog niet door alle mogelijkheden heen ben.

    Dus behalve antwoord op het z-index mysterie kan ik ook meningen en tips goed gebruiken.

    [update]
    Als ik de rollover ook absoluut postioneer dan is het in alle 3 de browsers (bijna) goed. (Ik dacht dat ik dat al lang had geprobeert, maar blijkbaar niet)
    Blijft de vraag over het "afsnijden" van de burron die over de rand van de main container heen gaat.
    [/update]

    [code:1:3444d1a68b]
    /* Topmenu rollover effects */

    a#menreiziger {
    width: 64px;
    height: 64px;
    background-image: url(images
    eizigersprite.png);
    text-decoration: none;
    background-position: 0px 0px;
    float: left;
    position: absolute;
    z-index: 2;
    top: 0px;
    left: 0px;
    }

    a#menreiziger:hover {
    background-image: url(images
    eizigersprite.png);
    width: 96px;
    height: 96px;
    background-position: 96px 0px;
    position: relative;
    z-index: 2;
    top: -16px;
    left: -16px;
    }
    a#menlinks {
    width: 64px;
    height: 64px;
    background-image: url(images/linksprite.png);
    text-decoration: none;
    background-position: 0px 0px;
    float: left;
    position: absolute;
    left: 64px;
    top: 0px;
    }

    a#menlinks:hover {
    background-image: url(images/linksprite.png);
    width: 96px;
    height: 96px;
    background-position: 96px 0px;
    position: relative;
    z-index: 2;
    top: -16px;
    left: 46px;
    }
    a#mencontact {
    width: 64px;
    height: 64px;
    background-image: url(images/contactsprite.png);
    text-decoration: none;
    background-position: 0px 0px;
    float: left;
    position: absolute;
    left: 128px;
    top: 0px;
    }

    a#mencontact:hover {
    background-image: url(images/contactsprite.png);
    width: 96px;
    height: 96px;
    background-position: 96px 0px;
    position: relative;
    z-index: 2;
    top: -16px;
    left: 110px;ressant
    }
    [/code:1:3444d1a68b]
  • [quote:1de641378c]Hier denk ik dus aan de z-index die hoger moet zijn dan die van de hoofdcontainer, maar omdat die niet gepositioneerd is heeft die zelf geen z-index. [/quote:1de641378c]

    hier zeg je de oplossing voor het probleem al, je moet die hoofd container een z-index geven en dus ook een positie.

    voor zo ver ik weet is dit de enige oplossing, maar je kan wel de groote van die hoofd container automatisch laten veranderen dan lijkt het net als of je toch een relative div hebt
  • Zoals je zelf al zegt werkt z-index alleen bij gepositioneerde elementen, en alleen ten opzichte van andere elementen met een z-index, anders wordt gewoon de "natuurlijke" stack order gebruikt.

    Over dat roll-over effect, tja ik hou niet zo van relatief of absolute positionering. De meest logische manier om het op te lossen is via een negatieve margin. Je moet dan uitzoeken wat de rotzooi veroorzaakt en die oplossen, makkelijker gezegd dan gedaan, I know… maar naar mijn mening wel de beste oplossing.
  • Ik moet zeggen dat ik ook helemaal niet kapot ben van dat positioneren, maar het leek me de enige optie. ik dacht nl dat het feit dat die margin de boel "opzij schoof" een "natuurlijke" reactie was omdat hij de dingen nu eenmaal standaard naast of onder elkaar zet en de ruimte neemt die andere elementen vrijlaten. Daardoor ging ik er van uit dat ik er sowieso positionering aan te pas ging komen. hetzij de buttons zelf (zoals nu) of de elementen die niet opzij gedrukt mogen worden. Ik heb voor het eerste gekozen.

    Ik wil best met die margin verder experimenteren, graag zelfs. maar ik heb geen idee wat ik dan zou moeten proberen. Een margin is een margin, daar valt weinig aan te veranderen. En hoe ik andere elementen op hun plaats moet vasthouden zonder positioneren zou ik eerlijk gezegd ook niet weten. Ik zou kunnen "smokkelen" door de de hover en de standaard buttons even groot te maken, alleen de achtergrond afbeelding te varieren. Dan ben ik van die hele margin of position af. Maar veel meer kan ik niet bedenken.
  • [i:fb2ba1ee3b]edit: kleine aanpassing en nu werkt het ook goed in IE6/IE7[/i:fb2ba1ee3b]

    Ik zat er een beetje mee te klooien {het is niet echt een volledige oplossing, vooral opdat de z-index gebeuren niet werkt in IE6 omdat die de :hover functie alleen ondersteund op anchor elementen, en omdat IE sowieso iets vreemds doet met de positionering… } [b:fb2ba1ee3b]nu niet meer van toepassing.[/b:fb2ba1ee3b] Ik weet niet hoe ver jij was gekomen met margin maar dit werkt zo goed :
    [code:1:fb2ba1ee3b]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" lang="nl">
    <head>
    <title>untitled</title>
    <meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />

    <style type="text/css">
    div {
    padding:100px;
    background-color:green;}
    li {
    list-style-type:none;
    display:block;
    float:left;}
    a {
    width:100px;
    height:50px;
    display:block;
    background-color:black;
    position:relative;
    z-index:1;}
    a:hover {
    width:120px;
    height:60px;
    margin: -5px -10px;
    background-color:red;
    z-index:2;}
    </style>
    </head>

    <body>
    <div class="container">
    <ul>
    <li><a href="#">bla1</a></li>
    <li><a href="#">bla2</a></li>
    <li><a href="#">bla3</a></li>
    <li><a href="#">bla4</a></li>
    </ul>
    </div>
    </body>
    </html>[/code:1:fb2ba1ee3b]
    Maar ik bedacht me ook dat je het met padding kan doen, ik weet natuurlijk niet hoe die knopjes van je eruit zien, als ze tegen elkaar aan zitten wil het natuurlijk niet met padding…
  • Dat ziet er inderdaad heel goed uit. Vanavond thuis ga ik hem eens nader bestuderen. het ziet er ook een stuk efficienter uit dan die code van mij. Ik zal vanavond wel wat online zetten, dan kun je het zien.
    Overigens staan de buttons bij mij niet helemaal tegen elkaar. Er zit een pixel of 10 ruimte tussen

    [Update 20:55]
    Dat "snel even online zetten" viel toch tegen.
    Het moet een wordpress template worden en zit al vol met PHP en includes die foutmeldingen veroorzaken (omdat ik wordpress b.v. nog niet heb geinstalleerd) en die foutmeldingen gooien de hele layout ook weer door elkaar.

    Verder had ik om een of andere reden een onverklaarbare ruimte tussen de buttons. maar je tip is zeker heel goed bruikbaar. Ik ga nu dus eerst de hele sectie waarin de buttons komen opnieuw opbouwen.
    [/Update]
  • Ik snap niet helemaal waarom je de beide images niet even groot maakt, waarbij je bij de normale 'state' gewoon wat meer loze ruimte om de knop hebt dan bij de hover? Je kunt beide afbeeldingen dan ook nog verwerken in 1 grote, waarbij je met background-position ervoor zorgt dat je de ene danwel de andere button te zien krijgt, zoek css image rollover of css sprites.

    [offtopic]teach, ger, krijgt elke bezoeker met 1000 berichten een taart? :D [/offtopic]
  • Hey boelieboelie, ik miste je al. Welkom terug :-)
    Ik heb idd even overwogen om het allemaal even groot te houden, maar in het oorspronkelijke idee vallen de hover versies een beetje over de buren heen. Als ik alles even groot houd dan is dat niet meer het geval. Het zou dus een compromis zijn, van de ene kant werk ik prachtig om het probleem heen, van de andere kant is het dan niet meer wat ik oorspronkelijk in mijn hoofd had. Daarom is het iets wat ik voor het laatst bewaar.

    Over het verspringen van de achtergronden, dat doe ik al (zie mijn code). Dit vooral overigens omdat het geen javascript is en ik geen preload functie tot mijn beschikking heb.

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.