Minimaler und maximaler Wert des Z-Index?

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.

┌──────────────────────┬───────────────────┬──────────────────────────────────┐
│ 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                       │
└──────────────────────┴───────────────────┴──────────────────────────────────┘

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)

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.

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

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/

Dies ist der Maximalwert einer 32-Bit-Ganzzahl: 2147483647

Siehe auch die Dokumente: https://www.w3.org/TR/CSS22/visuren.html#z-index (Negative Zahlen sind zulässig)

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

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.

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/  

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!).

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…).