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

Question

У меня есть 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>

Я показываю и скрываю div, нажимая .divClass через <asp:hyperlink>, используя jQuery.

Answer 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                       │
└──────────────────────┴───────────────────┴──────────────────────────────────┘

Answer 2

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

г-индекс '

Значение : авто | | наследовать

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

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

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

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

Answer 3

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

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

Answer 4

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

Answer 5

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

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

Answer 6

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

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

Answer 7

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

Answer 8

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

РЕДАКТИРОВАТЬ: Хороший доктор уже дал самое полное объяснение, но быстрая версия состоит в том, что минимум равен 0, потому что это не может быть отрицательное число, а максимум - ну, вам никогда не нужно будет превышать 10 большинство конструкций.

Answer 9

Я обнаружил, что часто, если z-индекс не работает, потому что у его родителя / братьев и сестер нет указанного 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>

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

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

Answer 10

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

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