Минимальное и максимальное значение z-index?

У меня есть div на моей странице HTML. Я показываю этот div в зависимости от некоторых условий, но div отображается за элементом HTML, на который я указал курсор мыши.

Я перепробовал все значения z-index от 0 до 999999. Может кто-нибудь сказать мне, почему это происходит?

Есть ли минимальное или максимальное значение свойства Z-INDEX 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>

Ответ 1

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

Ответ 2

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

'Z-индекс'

Значение: auto | < & целое число GT; | наследовать

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

Некоторые типы значений могут иметь целочисленные значения (обозначаются <integer> ) или действительные значения чисел (обозначаемые < & номер GT;). Реальные числа и целые числа указаны в десятичной обозначение только. < целое > состоит из одной или нескольких цифр "0" - "9". A < число > может быть < целое > , или оно может быть нулем или больше цифр, за которыми следует точка (.) за которым следуют одна или несколько цифр. И то и другое целые числа и действительные числа могут быть которому предшествует знак "-" или "+", чтобы указать знак. -0 эквивалентно 0 и не отрицательное число.

Обратите внимание, что многие свойства, которые позволяют целое или действительное число в качестве значения фактически ограничивают значение для некоторых диапазон, часто до неотрицательного значения.

Таким образом, в принципе нет ограничений для значения z-index в стандарте CSS, но я полагаю, что большинство браузеров ограничивают его на 32-битные значения (-2147483648 до +2147483647) на практике (64 будет немного выше, и в наши дни не имеет смысла использовать что-либо меньше 32 бит)

Ответ 3

Мои тесты показывают, что z-index: 2147483647 - максимальное значение, проверенное на FF 3.0.1 для OS X. Я обнаружил ошибку переполнения целого числа: если вы наберете z-index: 2147483648 (который равен 2147483647 + 1), элемент просто останется за всеми остальными элементами. По крайней мере браузер не сбой.

И урок для изучения заключается в том, что вы должны опасаться вводить слишком большие значения для свойства z-index, потому что они обертываются.

Ответ 4

Минимальное значение Z-index 0; максимальное значение зависит от типа браузера.

Ответ 5

По опыту, я думаю, что правильный максимум z-index равен 2147483638.

Ответ 6

Это зависит от браузера (хотя последняя версия всех браузеров должна быть максимальной в 2147483638), равно как и реакция браузера при превышении максимального значения.

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

Ответ 7

Это максимальное значение 32-битного целого числа: 2147483647

Также см. Документы: https://www.w3.org/TR/CSS22/visuren.html#z-index (разрешены отрицательные числа)

Ответ 8

Z-Index работает только для элементов, для которых применяются position: relative; или position: absolute;. Если это не проблема, нам нужно будет увидеть примерную страницу, которая будет более полезной.

EDIT: Хороший врач уже дал полное объяснение, но в быстрой версии это минимум 0, потому что он не может быть отрицательным числом и максимальным - ну, вам действительно не нужно будет идти выше 10 для большинство проектов.

Ответ 9

Пользователь выше говорит: "Ну, вам действительно не нужно будет идти выше 10 для большинства проектов".

В зависимости от вашего проекта вам могут потребоваться только z-индексы 0-1 или z-индексы 0-10000. Вам часто нужно играть в более высоких цифрах... особенно если вы работаете со зрителями в лайтбоксах (9999, кажется, является стандартным, и если вы хотите превысить свой z-индекс, вам нужно будет это превысить!)

Ответ 10

Я обнаружил, что часто, если z-index не работает, потому что его родительские/сиблинсы не имеют указанного z-индекса.

Итак, если у вас есть:

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

item # 3, или даже # 4, может оспаривать # 2 для пространства щелчка/наведения, хотя, если вы установите # 1 на z-index 0, братья и сестры, которые z-index помещают их в независимые стеки, теперь находятся в тот же самый стек и будет правильно z-index.

Это полезное и достаточно очеловеченное описание: http://foohack.com/2007/10/top-5-css-mistakes/

Ответ 11

В то время как INT_MAX, вероятно, самая безопасная ставка, WebKit, по-видимому, использует внутренности двойным образом и, таким образом, позволяет очень большие числа (с определенной точностью). LLONG_MAX отлично работает (по крайней мере, в 64-битном Chromium и WebkitGTK), но будет округлено до 9223372036854776000.

(Хотя вам следует тщательно подумать, действительно ли вам нужно это множество z-индексов...).

Ответ 12

Любопытный факт: если вы используете редактор Firebug и помещаете большое число в z-index, браузер заменит самое большое вставленное значение на максимальное значение

Ответ 13

Просто добавив, что отрицательные числа поддерживаются, их использование не считается плохой практикой:

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

/* Keyword value */
z-index: auto;

/* <integer> values */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /* Negative values to lower the priority */

/* Global values */
z-index: inherit;
z-index: initial;
z-index: unset;