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


519

У меня есть 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помощью onclick с <asp:hyperlink>помощью jQuery.


Проблема, вероятно, не связана с z-index специально. Можете ли вы привести пример HTML и CSS, который иллюстрирует поведение? В каких браузерах вы испытываете это?
Рориф

Просто ради интереса вы можете попробовать то же самое, не используя таблицу, просто некоторый контент, ссылку и div. Также добавьте цвет фона в div, чтобы быть уверенным в процессе разработки.
roborourke

60
msgstr "перепробовал все значения для свойства Z-INDEX от 0 до 999999". Я считаю, что трудно поверить.
Сампатрисрис

4
@ Krumia Не знаю, он мог бы попробовать все значения z-index между 0-999999 с JS ... Просто вариант ...
FullyHumanProgrammer

4
Никто на самом деле не упомянул display: noneв своем CSS?
Марк Байенс

Ответы:


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

4
Я считаю, что он имеет в виду отрицательный.
Гэвин

42
Как ты с этим столкнулся?
2540625

Какие-нибудь номера для мобильных Safari / Chrome / Firefox?
2540625

30
Для тех, кто заинтересован 2,147,483,647 = 2^31 - 1. Это премьер Мерсенна.
Реджи

2
@BehnamMohammadi, каким должно быть стандартное поведение?
Pacerier

307

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

'Z-индекс'

Значение : авто | <целое число> | унаследуют

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

Некоторые типы значений могут иметь целочисленные значения (обозначаются <integer>) или значения действительных чисел (обозначаются <number>). Действительные числа и целые числа указаны только в десятичной записи. <Целое число> состоит из одной или нескольких цифр от «0» до «9». <Число> может быть либо <целое число>, либо это может быть ноль или более цифр, за которыми следует точка (.), За которой следует одна или несколько цифр. Как целым числам, так и действительным числам может предшествовать знак «-» или «+» для обозначения знака. -0 эквивалентно 0 и не является отрицательным числом.

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

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


17
Важно отметить, что максимальное значение z-index в Safari 3 было 16777271. Это было повышено до 32-битного стандарта в Safari 4, так что это касается только старых браузеров. Кроме того, даже в Safari 3 все, что выше 16777271, ограничено, поэтому, если вы не используете абсурдно большие значения z-index для упорядочения нескольких элементов, у вас не должно возникнуть проблем (т. Е. Установка для одного элемента значения z-index 2147483647 будет гарантировать, что элемент остается на самом верху в любом браузере, если только он не конкурирует с другим элементом, который также имеет z-индекс> 16777271).
Доктор Дж.

6
@DoktorJ Кто-нибудь знает, почему это 16777271? Кажется странным, что это на 56 больше, чем предел 24-разрядного целого числа без знака.
Jools

2
@Jools, по словам разработчика WebKit Эрика Сейдела , это было результатом использования 24-битного битового поля -log base 2 (lg) = lg(16777271)
Janosch

2
@Janosch Извините, я не понимаю. lg (16777271) больше 24. Я бы подумал, что 24-битное битовое поле недостаточно велико.
Jools

@ Janosch, 2 ^ 24 = 16777216. 16777271Таким образом, потребуется 25 бит.
Pacerier

157

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

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


57
Потому что это (2147483647) является наибольшим положительным значением целого числа со знаком в 32-разрядных операционных системах ...
Бадр Хари

4
Я не думаю, что число будет округлено, если значение превысит 2147483647 ... Я думаю, что более вероятно, что браузеры будут просто обрабатывать любое число над этим значением как постоянное значение, например 0.
oliver-clare

3
Может быть, ваша ценность просто стала отрицательной ... Например -2147483647
Wahyu Fahmy

3
В современных браузерах переход 2147483648 не перемещает элементы за другими элементами
Зак Сауцер

25

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

введите описание изображения здесь


4
На самом деле, z-index может быть отрицательным числом. Позиционированные элементы с отрицательными z-индексами упорядочиваются первыми в контексте стека, поэтому они будут отображаться позади всех других элементов. Также см. Документы: w3.org/TR/CSS22/visuren.html#z-index
magikMaker,

17
Легко копировать и вставлять: 2147483647
подсвечник

Z-index может быть отрицательным числом, но для примера Safari для iOS 11.0.2 есть проблема с этим свойством.
kris_IV

Сантош, где ты взял эти цифры? Вы скопировали из ответа Behnam и добавили IE7 и IE8?
CPHPython



21

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


7
Похоже, вы не правы. Согласно тестам, проведенным в 2009 году Эриком Пойдокасом, максимальное значение z-index (без риска выпадения элементов при переполнении) составляет 2147483647.
Martin

14

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

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


5
Я использовал "z-index: -1;" прежде чем «утопить» элемент, чтобы на него нельзя было нажать. Это, вероятно, не популярное решение, но оно работает. : P
Ты.

17
Я знаю, что это немного поздно, но это работает и с положением: исправлено.
TCCV

7
AFAIK, вы можете иметь отрицательные целые числа для значения z-index.
d -_- б

Интересно, почему я указываю z-index: 1000, но браузер сказал мне, что фактический z-index - auto. позиция делает свое дело.
Будет Ву

6

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

Так что если у вас есть:

<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-индекс правильно.

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


4
Пока мы находимся на этой теме, другой распространенной проблемой является отсутствие position: relative;или что-то подобное.
Райан Тейлор

1
Собственно, просто перечитайте оригинальный пост. Вы правы, это, наверное, его проблема.
Райан Тейлор

5

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

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


0

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

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.