Maksimal CSS Z-indeksverdi

For noen måneder siden lanserte jeg et nytt nettsted og fikk en klage om at en topplisteannonse ble vist over en rullegardinmeny som jeg hadde på siden. Enkelt nok, jeg inspiserte css av annonsen, så at den hadde en z-indeks på 999 og opped z-indeksen på menyen til 1000. Problemet løst. Samme problem igjen et par uker senere, opped det til 10.000. Igjen i dag måtte jeg inspisere en annen annonse som forårsaket det samme problemet. Den hadde en indeks på 1 million. Så irriterende.

Det fikk meg til å lure på, hva er maksimumsverdien som jeg kunne sette en z-indeks til. Ser på ulike CSS-dokumentasjon, det virket ikke som en spesifisert maksimumsverdi. Svaret i Firefox, IE og Chrome er:

2147483647

Det er den maksimale signerte verdien av et 32-biters heltall. Teknisk sett kan jeg forestille meg at denne begrensningen kommer fra programmeringsspråket som nettleseren ble laget i. Jeg er sikker på at det er noen eldre nettlesere der det å sette noe på denne verdien, kan gjøre noe pause. Interessante ting skjønt. Så, hvis du vil sørge for at elementet ditt er helt 100% sikkert på toppen, sett det til 2147483647. Problemet løst. I virkeligheten fant jeg det imidlertid veldig irriterende at en annonse hadde satt den til et så høyt tall. Tatt i betraktning på en hvilken som helst side, vil det være en svært begrenset mengde lag, og sette det til et mye mindre tall burde gjøre trikset.

Se Også