Мінімальне та максимальне значення z-індексу?


518

У мене на своїй HTML-сторінці є div. Я показую цей div на основі певної умови, але div відображається за елементом HTML, де я вказав курсор миші.

Я спробував усі значення z-індексу від 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 з .divClassonclick за <asp:hyperlink>допомогою jQuery.


Проблема, ймовірно, не стосується z-індексу конкретно. Чи можете ви навести приклад HTML та CSS, що ілюструє поведінку? У яких браузерах ви відчуваєте це?
roryf

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

60
"випробував усе значення для властивості Z-INDEX від 0 - 999999". Мені важко повірити.
sampathsris

4
@Krumia Не знаю, він міг би спробувати всі значення z-індексу між 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
Я вважаю, що він означає негатив.
Гавін

41
Як ви натрапили на це?
2540625

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

30
Для зацікавлених 2,147,483,647 = 2^31 - 1,. Це прем'єр Мерсенна.
Реджі Пінкхем

2
@ BehnamMohammadi, якою має бути стандартна поведінка?
Pacerier

306

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

'z-індекс'

Значення : авто | <цілий> | успадковувати

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

Деякі типи значень можуть мати цілі значення (позначаються <integer>) або значення дійсних чисел (позначаються <числом>). Реальні числа та цілі числа задаються лише у десятковій нотації. <integer> складається з однієї або декількох цифр "0" до "9". <Число> може бути або <цілим числом>, або це може бути нуль або більше цифр, а потім крапка (.), А потім одна або кілька цифр. Як цілим, так і дійсним числам може передувати "-" або "+" для позначення знаку. -0 еквівалентно 0 і не є від’ємним числом.

Зауважте, що багато властивостей, які дозволяють цілому чи дійсному числу як значення, фактично обмежують значення до деякого діапазону, часто до негативного значення.

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


17
Важливо зауважити, що максимальне значення z-індексу для Safari 3 становило 16777271. Це було піднято до 32-бітного стандарту в Safari 4, тому це викликає занепокоєння, якщо ви орієнтуєтесь на старі браузери. Крім того, навіть у Safari 3 все, що вище 16777271, обмежується цим, тому якщо ви не використовуєте абсурдно великі значення z-індексу для замовлення декількох елементів, у вас не повинно виникнути проблем (тобто встановити один елемент на z-індекс значення 2147483647 забезпечить, щоб елемент залишався на самому верху в будь-якому браузері, якщо тільки він не конкурує з іншим елементом, який також має z-індекс> 16777271).
Doktor J

6
@DoktorJ Хтось знає, чому це 16777271? Здається дивним, що це на 56 більше, ніж межа 24-бітного цілого числа, що не підписується.
Jools

2
@Jools за словами веб-розробника Еріка Сейделя , це було результатом використання 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-бітових операційних системах ...
Badr Hari

4
Я не думаю, що число буде перетворюватися, якщо значення перевищує 2147483647 ... Я думаю, що швидше браузери просто розглянуть будь-яке число над цим значенням як постійне значення, наприклад 0.
oliver-clare

3
Можливо, ваше значення просто стає негативним ... Наприклад, -2147483647
Wahyu Fahmy

3
У сучасних браузерах понад 2147483648 не переміщують елементи за іншими елементами
Zach Saucier

25

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

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


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

17
Легко скопіювати та вставити: 2147483647
підсвічник

Z-індекс може бути від’ємним числом, але, наприклад, у Safari для iOS 11.0.2 є проблема з цією властивістю.
kris_IV

Сантош, звідки ти взяв ці цифри? Ви скопіювали відповідь Бехнама та додали IE7 та IE8?
CPHPython

21

Це залежить від браузера (хоча остання версія всіх браузерів має перевищувати 2147483638), як і реакція браузера при перевищенні максимуму.

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



21

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


7
Здається, ви помиляєтесь. Згідно з тестами, проведеними в 2009 році Еріком Пойдокасом, максимальне значення z-індексу (без ризику падіння елементів при переливі) становить 2147483647.
Мартін,

14

Z-Index працює лише для елементів, які мають position: relative;абоposition: absolute; до них застосовані застосовані. Якщо це не проблема, нам потрібно переглянути приклад, щоб стати кориснішою.

EDIT: Хороший лікар вже виклав повне пояснення, але швидка версія полягає в тому, що мінімум дорівнює 0, оскільки це не може бути від’ємним числом і максимумом - ну, вам ніколи не потрібно перевищувати 10 для більшості конструкцій.


5
Я використав "z-індекс: -1;" перш ніж "потопити" елемент, щоб його не можна було натиснути. Це, мабуть, не популярне рішення, але воно працює. : Р
Тай.

17
Я знаю, що це трохи пізно, але це працює з позицією: виправлено також.
TCCV

7
AFAIK, ви можете мати від’ємні цілі числа для значення z-індексу.
d -_- b

Цікаво, чому я вказую z-індекс: 1000, але браузер сказав мені, що фактичний z-індекс - це автоматично. позиція робить трюк.
Буде Ву

6

Я виявив, що часто, якщо 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-індекс 0, брати і сестри, які z-індекс поміщають їх у незалежні стеки, тепер знаходяться в одному стеку і буде нормально 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-розрядному хромі та WebkitGTK), але буде округлено до 9223372036854776000.

(Хоча вам слід уважно розглянути, чи справді вам справді потрібні такі багато індексів z…).

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.