web-dev-qa-db-de.com

Minimaler und maximaler Wert des Z-Index?

Ich habe ein Div in meiner HTML-Seite. Ich zeige dieses Div aufgrund einer bestimmten Bedingung an, 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 für die 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 die div mit .divClass über den <asp:hyperlink> mit jQuery.

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

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

'z-index'

Wert : auto | <integer> | erben

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

Einige Werttypen können Ganzzahlwerte (bezeichnet mit <Ganzzahl>) oder reelle Zahlenwerte (bezeichnet mit <Zahl>) aufweisen. Reelle Zahlen und ganze Zahlen werden nur in Dezimalschreibweise angegeben. Eine <Ganzzahl> besteht aus einer oder mehreren Ziffern "0" bis "9". Eine <Zahl> kann entweder eine <Ganzzahl> sein oder null oder mehr Ziffern, gefolgt von einem Punkt (.), Gefolgt von einer oder mehreren Ziffern. Sowohl ganzen Zahlen als auch reellen Zahlen kann ein "-" oder "+" vorangestellt werden, um das Vorzeichen anzugeben. -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 keine Einschränkungen für den Z-Index-Wert im CSS-Standard, aber ich denke, die meisten Browser beschränken ihn in der Praxis auf vorzeichenbehaftete 32-Bit-Werte (–2147483648 bis +2147483647) (64 wäre ein wenig veraltet) macht heutzutage keinen Sinn, weniger als 32 Bit zu verwenden)

299
Tamas Czinege

Meine Tests haben ergeben, dass z-index: 2147483647 der maximale Wert ist, der unter FF 3.0.1 für OS X getestet wurde. Ich habe einen Integer-Überlauffehler entdeckt: Wenn Sie z-index: 2147483648 (2147483647 + 1) eingeben, geht das Element einfach hinter allen anderen Elementen. Zumindest stürzt der Browser nicht ab.

Die Lektion, die Sie lernen sollten, ist, dass Sie nicht zu große Werte für die z-index -Eigenschaft eingeben, da diese sich umschließen.

152
Ran

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

enter image description here

22
Santosh Khalse

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)

21
magikMaker

Aus Erfahrung denke ich, dass das korrekte Maximum z-index 2147483638 ist.

21
Mohammad

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

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

21
pdr

Z-Index funktioniert nur für Elemente, auf die position: relative; oder position: absolute; angewendet wurde. Wenn das nicht das Problem ist, müssen wir eine Beispielseite sehen, um hilfreicher zu sein.

BEARBEITEN: Der gute Arzt hat bereits die ausführlichste Erklärung abgegeben, aber die schnelle Version ist, dass das Minimum 0 ist, da es keine negative Zahl und kein Maximum sein kann - Sie müssen für die meisten Designs nie wirklich über 10 hinausgehen.

13
roborourke

Ich habe festgestellt, dass Z-Index oft nicht funktioniert, weil seine Eltern/Geschwister keinen festgelegten 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 3 oder sogar 4 kann um den Klick-/Schwebebereich 2 kämpfen. Wenn Sie jedoch den Z-Index 0 für 1 festlegen, befinden sich die Geschwister, deren Z-Index sie in unabhängigen Stapeln ablegt, jetzt im selben Stapel und wird richtig z-indexieren.

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

6
kcar

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 mit 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 überschreiten!)

5
Rocky

Eine merkwürdige Tatsache: Wenn Sie einen Editor wie Firebug verwenden und eine große Zahl in z-index eingeben, ersetzt der Browser den größten eingefügten Wert durch den Maximalwert

0
Diego Mariano

Während INT_MAX wahrscheinlich die sicherste Wette ist, verwendet WebKit anscheinend intern Doubles und erlaubt somit sehr große Zahlen (bis zu einer gewissen Genauigkeit). LLONG_MAX z.B. Funktioniert einwandfrei (mindestens 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…).

0
Creshal