Minimaler und maximaler Wert des Z-Index?

518

Ich habe ein Div in meiner HTML-Seite. Ich zeige dieses Div basierend auf einer bestimmten Bedingung, aber das Div wird hinter dem HTML-Element angezeigt, auf das ich mit dem Mauszeiger gezeigt habe.

Ich habe alle Werte für den Z-Index von 0 bis 999999 ausprobiert. Kann mir jemand sagen, warum dies geschieht?

Gibt es einen minimalen oder maximalen Wert der Z-INDEX-Eigenschaft von CSS?

.divClass {
     position: absolute; 
     left: 25px; 
     top: 25px; 
     width: 320px;
     height: 300px; 
     z-index: 1000; 
}
<table cellspacing="0" cellpadding="0" width="100%">
  <tr>
    <td>
      <asp:HyperLink ID="lnkProgram" runat="server"></asp:HyperLink>
    </td>
  </tr>
  <tr>
     <td>
         <div class="divClass">
           Some Data
         </div>
     </td>
  </tr> 
</table>

Ich zeige und verstecke das Div mit einem .divClassKlick über die <asp:hyperlink>Verwendung von jQuery.

Sachin Gaur
quelle
Das Problem hat wahrscheinlich nicht speziell mit dem Z-Index zu tun. Können Sie ein Beispiel für HTML und CSS geben, das das Verhalten veranschaulicht? In welchen Browsern tritt dies auf?
Roryf
Nur aus Interesse könnten Sie das Gleiche ausprobieren, ohne die Tabelle, nur einige Inhalte, den Link und das Div zu verwenden. Fügen Sie dem div auch eine Hintergrundfarbe hinzu, um sicherzugehen, dass Sie sich weiterentwickeln.
Roborourke
60
"Alle Werte für die Z-INDEX-Eigenschaft von 0 bis 999999 ausprobiert". Ich finde das schwer zu glauben.
Sampathsris
4
@Krumia Ich nicht, er könnte alle Z-Index-Werte zwischen 0-999999 mit JS versuchen ... Nur eine Option ...
FullyHumanProgrammer
4
Niemand hat das tatsächlich display: nonein seinem CSS erwähnt?
Mark Baijens

Antworten:

386
┌──────────────────────┬───────────────────┬──────────────────────────────────┐
│ Browser              │ Max z─index value │ When exceeded, value changes to: │
╞══════════════════════╪═══════════════════╪══════════════════════════════════╡
│ Firefox 0 - 2        │ 2147483647        │ element disappears               │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Firefox 3            │ 2147483647        │ 0                                │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Firefox 4+           │ 2147483647        │ 2147483647                       │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Safari 0 - 3         │ 16777271          │ 16777271                         │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Safari 4+            │ 2147483647        │ 2147483647                       │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Internet Explorer 6+ │ 2147483647        │ 2147483647                       │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Chrome 29+           │ 2147483647        │ 2147483647                       │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Opera 9+             │ 2147483647        │ 2147483647                       │
└──────────────────────┴───────────────────┴──────────────────────────────────┘
Behnam Mohammadi
quelle
4
Ich glaube, er meint negativ.
Gavin
41
Wie bist du auf diese gekommen?
2540625
Irgendwelche Nummern für mobile Safari / Chrome / Firefox?
2540625
30
Für Interessierte , 2,147,483,647 = 2^31 - 1. Es ist ein Mersenne Prime.
Reggie Pinkham
2
@BehnamMohammadi, wie sollte das Standardverhalten sein?
Pacerier
306

http://www.w3.org/TR/CSS21/visuren.html#z-index

'Z-Index'

Wert : auto | <Ganzzahl> | erben

http://www.w3.org/TR/CSS21/syndata.html#numbers

Einige Werttypen können ganzzahlige Werte (bezeichnet mit <Ganzzahl>) oder reelle Zahlenwerte (bezeichnet mit <Nummer>) haben. Reelle Zahlen und ganze Zahlen werden nur in Dezimalschreibweise angegeben. Eine <Ganzzahl> besteht aus einer oder mehreren Ziffern "0" bis "9". Eine <Nummer> kann entweder eine <Ganzzahl> sein oder aus null oder mehreren Ziffern, gefolgt von einem Punkt (.), Gefolgt von einer oder mehreren Ziffern. Vor ganzen Zahlen und reellen Zahlen kann ein "-" oder "+" stehen, um das Vorzeichen anzuzeigen. -0 entspricht 0 und ist keine negative Zahl.

Beachten Sie, dass viele Eigenschaften, die eine Ganzzahl oder eine reelle Zahl als Wert zulassen, den Wert tatsächlich auf einen bestimmten Bereich beschränken, häufig auf einen nicht negativen Wert.

Grundsätzlich gibt es im CSS-Standard keine Einschränkungen für den Z-Index-Wert, aber ich denke, die meisten Browser beschränken ihn in der Praxis auf vorzeichenbehaftete 32-Bit-Werte (–2147483648 bis +2147483647) (64 wäre etwas übertrieben, und das ist der Fall macht heutzutage keinen Sinn, weniger als 32 Bit zu verwenden)

Tamas Czinege
quelle
17
Es ist wichtig zu beachten, dass der maximale Z-Index-Wert in Safari 3 16777271 betrug. Dieser Wert wurde in Safari 4 auf den 32-Bit-Standard angehoben, sodass dies nur dann ein Problem darstellt, wenn Sie auf ältere Browser abzielen. Auch in Safari 3 wird alles über 16777271 begrenzt. Wenn Sie also nicht absurd große Z-Index-Werte verwenden, um mehrere Elemente zu ordnen, sollten Sie kein Problem haben (dh ein Element auf einen Z-Index-Wert von 2147483647 setzen stellt sicher, dass das Element in jedem Browser ganz oben bleibt, es sei denn, es konkurriert mit einem anderen Element, das ebenfalls einen Z-Index> 16777271 hat.
Doktor J
6
@DoktorJ Weiß jemand, warum es 16777271 ist? Es scheint bizarr, dass es 56 mehr als das Limit einer vorzeichenlosen 24-Bit-Ganzzahl ist.
Jools
2
@Jools laut Webkit-Entwickler Eric Seidel , das war das Ergebnis der Verwendung eines 24-Bit-Bitfelds -log base 2 (lg) = lg(16777271)
Janosch
2
@Janosch Sorry, ich verstehe nicht. lg (16777271) ist größer als 24. Ich hätte gedacht, dass ein 24-Bit-Bitfeld nicht groß genug ist.
Jools
@Janosch, 2 ^ 24 = 16777216. 16777271benötigt also 25 Bit.
Pacerier
157

Meine Tests zeigen, dass dies z-index: 2147483647der Maximalwert ist, der unter FF 3.0.1 für OS X getestet wurde. Ich habe einen Ganzzahl-Überlauffehler entdeckt: Wenn Sie z-index: 2147483648(2147483647 + 1) eingeben, steht das Element nur hinter allen anderen Elementen. Zumindest stürzt der Browser nicht ab.

Und die Lektion zu lernen ist, dass Sie sich davor hüten sollten, zu große Werte für die z-indexEigenschaft einzugeben, da diese sich umschließen.

Ran
quelle
57
Weil dies (2147483647) der größte positive Wert einer vorzeichenbehafteten Ganzzahl auf einem 32-Bit-Betriebssystem ist ...
Badr Hari
4
Ich glaube nicht , wird die Nummer umschlingen , wenn der Wert über 2147483647 ... Ich denke , es ist wahrscheinlich , dass Browser wird nur eine beliebige Zahl über diesen Wert als einen konstanten Wert behandeln, zum Beispiel 0.
oliver-clare
3
Vielleicht wird Ihr Wert einfach negativ ... Zum Beispiel -2147483647
Wahyu Fahmy
3
In modernen Browsern über 2147483648 werden die Elemente nicht hinter andere Elemente verschoben
Zach Saucier
25

Der Mindestwert des Z-Index ist 0 ; Der Maximalwert hängt vom Browsertyp ab.

Geben Sie hier die Bildbeschreibung ein

Santosh Khalse
quelle
4
Tatsächlich kann der Z-Index eine negative Zahl sein. Positionierte Elemente mit negativen Z-Indizes werden zuerst in einem Stapelkontext geordnet, sodass sie hinter allen anderen Elementen angezeigt werden. Siehe auch die Dokumente: w3.org/TR/CSS22/visuren.html#z-index
magikMaker
17
Einfach zu kopieren und einzufügen: 2147483647
Candlejack
Der Z-Index kann eine negative Zahl sein, aber zum Beispiel hat Safari für iOS 11.0.2 ein Problem mit dieser Eigenschaft.
kris_IV
Santosh, woher hast du diese Zahlen? Haben Sie von Behnams Antwort kopiert und IE7 und IE8 hinzugefügt?
CPHPython
21

Dies hängt vom Browser ab (obwohl die neueste Version aller Browser maximal 2147483638 erreichen sollte), ebenso wie die Reaktion des Browsers, wenn das Maximum überschritten wird.

http://www.puidokas.com/max-z-index/

pdr
quelle
21

Aus Erfahrung denke ich, dass das richtige Maximum z-index2147483638 ist.

Mohammad
quelle
7
Scheint, als ob du falsch liegst. Nach den 2009 von Eric Poidokas durchgeführten Tests beträgt der maximale Z-Index-Wert (ohne das Risiko, dass Elemente beim Überlaufen fallen) 2147483647.
Martin
14

Z-Index funktioniert nur für Elemente, die sie haben position: relative;oder position: absolute;auf sie angewendet haben. Wenn dies nicht das Problem ist, benötigen wir eine Beispielseite, um hilfreicher zu sein.

EDIT: Der gute Arzt hat bereits die vollständigste Erklärung abgegeben, aber die schnelle Version ist, dass das Minimum 0 ist, weil es keine negative Zahl und das Maximum sein kann - nun, Sie müssen für die meisten Designs nie wirklich über 10 gehen.

Roborourke
quelle
5
Ich habe "z-index: -1;" bevor Sie ein Element "versenken", damit es nicht angeklickt werden kann. Es ist wahrscheinlich keine beliebte Lösung, aber es funktioniert. : P
Ty.
17
Ich weiß, dass dies etwas spät ist, aber es funktioniert mit Position: auch behoben.
TCCV
7
AFAIK, Sie können negative Ganzzahlen für den Z-Index-Wert haben.
d -_- b
Ich frage mich, warum ich Z-Index: 1000 spezifiziere, aber der Browser hat mir gesagt, dass der tatsächliche Z-Index automatisch ist. Position macht den Trick.
Will Wu
6

Ich habe festgestellt, dass Z-Index oft nicht funktioniert, weil seine Eltern / Geschwister keinen bestimmten Z-Index haben.

Also, wenn Sie haben:

<div id="1">
    <a id="2" style="z-index:2"></a>
    <div id="3" style="z-index:1"></div>
    <button id="4"></button>
</div>

Element Nr. 3 oder sogar Nr. 4 bestreitet möglicherweise Nr. 2 um den Klick- / Schwebebereich. Wenn Sie jedoch Nr. 1 auf Z-Index 0 setzen, befinden sich die Geschwister, deren Z-Index sie in unabhängige Stapel legt, jetzt im selben Stapel und wird Z-Index richtig.

Dies hat eine hilfreiche und ziemlich humanisierte Beschreibung: http://foohack.com/2007/10/top-5-css-mistakes/  

kcar
quelle
4
Während wir uns mit dem Thema befassen, besteht ein weiteres häufiges Problem darin, nichts zu haben position: relative;oder so etwas.
Ryan Taylor
1
Lesen Sie einfach den Originalbeitrag erneut. Du hast recht, das ist wahrscheinlich sein Problem.
Ryan Taylor
5

Ein Benutzer oben sagt: "Nun, für die meisten Designs müssen Sie nie wirklich über 10 hinausgehen."

Abhängig von Ihrem Projekt benötigen Sie möglicherweise nur Z-Indizes 0-1 oder Z-Indizes 0-10000. Sie müssen oft in höheren Ziffern spielen ... besonders wenn Sie mit Lightbox-Viewern arbeiten (9999 scheint der Standard zu sein, und wenn Sie den Z-Index übertreffen möchten, müssen Sie diesen Wert überschreiten!).

Felsig
quelle
0

Während dies INT_MAXwahrscheinlich die sicherste Wette ist, verwendet WebKit anscheinend intern Doppel und erlaubt daher sehr große Zahlen (bis zu einer gewissen Genauigkeit). LLONG_MAXzB funktioniert einwandfrei (zumindest in 64-Bit-Chrom und WebkitGTK), wird jedoch auf 9223372036854776000 gerundet.

(Obwohl Sie sorgfältig überlegen sollten, ob Sie wirklich, wirklich so viele Z-Indizes benötigen…).

Creshal
quelle