Почему z index не работает
Перейти к содержимому

Почему z index не работает

  • автор:

Почему z-index не работает?

Изображение 471

Итак, если я правильно понял z-index , это было бы прекрасно в этой ситуации: Я хочу поместить нижнее изображение (тег/карту) под div над ним. Таким образом, вы не можете видеть острые края. Как это сделать?

z-index:-1 // on the image tag/card 
z-index:100 // on the div above 

тоже не работает. Ни одна комбинация ничего подобного. Почему?
Linkjuice57 08 фев. 2012, в 09:34
Поделиться
Поделиться:

4 ответа

Лучший ответ

Свойство z-index работает только с элементами position , отличными от static (например, position: absolute; , position: relative; или position: fixed ). Существует также position: sticky; , поддерживаемый в Firefox, с префиксом в Safari, который некоторое время работал в более ранних версиях Chrome под специальным флагом и находится на рассмотрении Microsoft для добавления в свой браузер Edge.

Evert 08 фев. 2012, в 12:11
Поделиться
AjAX. 29 май 2018, в 18:39

добавив к этому ответу, Chrome и, вероятно, другие браузеры на момент написания этой статьи требуют, чтобы вы явно указали position: relative чтобы z-index работал, несмотря на то, что элементы ведут себя по-другому, по умолчанию

benipsen 24 янв. 2019, в 08:17

static элементы являются статическими и не могут перемещаться в x, y or z planes . Они не могут двигаться в x plane (left or right) или в y plane (top or bottom) как при работе с position: absolute . И при этом они не могут двигаться в z plane ie with z-index .

Akash 06 март 2019, в 04:17
Показать ещё 1 комментарий

ваши элементы должны иметь атрибут позиции. (например, абсолютный, относительный, фиксированный) или z-индекс не будут работать

clem 08 фев. 2012, в 12:37
Поделиться

Во многих случаях элемент должен быть расположен для z-index для работы.

Действительно, применение position: relative к элементам в вопросе, скорее всего, решит проблему (но кода недостаточно, чтобы знать наверняка).

На самом деле, position: fixed , position: absolute и position: sticky также включит z-index , но эти значения также изменят макет. С position: relative макет не нарушен.

По существу, если элемент не является position: static (по умолчанию), он считается позиционированным и z-index будет работать.

Многие ответы на «Почему не работает z-index?» вопросы утверждают, что z-index работает только с позиционированными элементами. Начиная с CSS3, это уже не так.

Элементы flex items или элементы сетки могут использовать z-index , даже если position — static .

4.3. Flex Item Z-Ordering

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

5.4. Ось Z-порядка: свойство z-index

Порядок рисования элементов сетки точно такой же, как и встроенные блоки, за исключением того, что порядок заказанных документов упорядочен вместо необработанного порядка документа и z-index значения, отличные от auto , создают контекст укладки, даже если position — static .

Здесь демонстрируется z-index , работающая с непозиционированными элементами flex: https://jsfiddle.net/m0wddwxs/

Michael_B 18 май 2016, в 22:47
Поделиться

«Элементы, которые являются гибкими элементами или элементами сетки, могут использовать z-index даже в том случае, если позиция статична». Да, спецификация, по сути, говорит, что нужно обрабатывать position: static точно так же, как и position: relative для элементов flex и grid из-за динамического характера этих методов размещения. Так что я бы, возможно, сказал, что дело не в том, что в CSS3 больше нет необходимости позиционировать элемент, а в том, что CSS3 обрабатывает элементы flex и grid так, как если бы они были расположены, независимо от того. Хотя, возможно, всего два взгляда на одно и то же.

TylerH 25 окт. 2017, в 19:14

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

Контексты стеки имеют иерархию, и каждый контекст стекирования рассматривается в порядке стекирования родительского контекста стекирования.

Итак, со следующим html

div < border: 2px solid #000; width: 100px; height: 30px; margin: 10px; position: relative; background-color: #FFF; >#el3

независимо от того, насколько большой будет z-index of el3 , он всегда будет находиться под el1 , потому что он имеет более низкий контекст стекирования. Вы можете представить порядок укладки как уровни, где порядок стекирования el3 на самом деле 3,8, который ниже 5.

Если вы хотите проверить контексты стеков родительских элементов, вы можете использовать это:

var el = document.getElementById("#yourElement"); // or use $0 in chrome; do < var styles = window.getComputedStyle(el); console.log(styles.zIndex, el); >while(el.parentElement && (el = el.parentElement)); 

Не работает z-index

И z-index ставьте больше 1, т.к. это дефолтное положение.

Отслеживать
ответ дан 25 авг 2015 в 18:59
327 1 1 серебряный знак 7 7 бронзовых знаков

1 — это не дефаултное значение. И даже 0 — не дефаултное. 0 — это уровень фона. А дефаултное значение auto и оно не создаёт контекст, в отличие от любого числа.

25 авг 2015 в 19:55

z-index , отличный от auto только создаёт новый контекст и управляет расположением элемента поверх или под другими элементами внутри родительского контекста. За пределы родительского контекста выбраться нельзя, как-то взаимодействовать с элементами вне него — тоже.

Помимо z-index контекст создают opacity , transform и position при своих недефаултных значениях. Возможно, ещё что-то — навскидку в голову не приходит.

Контекс никак не связан с расположением элемента по x и y, поэтому наложения одного элемента на другой не происходит и не должно происходить. Для наложения надо использовать позиционирование, либо отрицательный margin.

CSS свойство z-index не работает

Я задал родителю значение свойства positon: static; для дочернего допустим menu1 и logo поставил absolute. и разные z-index. и все равно они как бы находятся на одной плоскости, а не как обещано с z-index в разных.

Отслеживать

задан 25 фев 2013 в 13:36

315 3 3 золотых знака 8 8 серебряных знаков 23 23 бронзовых знака

Как они могу быть на одной плоскости если у них разные z-index? Тем более что их position: absolute вынесло из нормального потока. jsfiddle.net/dCtnX

Почему z-index не работает?

Здравствуйте! Подскажите, почему в данном случае свойство z-index, присвоенное блоку, в котором выводится карта ОСМ, не перекрывает карту и не отображает внутреннюю тень блока? Спасибо.

Отслеживать
задан 28 окт 2012 в 15:52
180 2 2 золотых знака 6 6 серебряных знаков 21 21 бронзовый знак

пока не пойму какому именно блоку индекс, но иногда стоит попробовать поставить по больше его, напр. 99999999. Напишите за какой элемент нужно схватиться, класс или id у него есть?

28 окт 2012 в 15:55

Именно тот блок, в котором карта, там же видно его серые границы со скругленными углами, его ид inborder.

28 окт 2012 в 15:56

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Внутренняя тень не будет работать при такой верстке, можете даже не мучатся. Рамку с тенью можете наложить отдельно. Либо целиком, совместив со св-вом pointer-events: none; (которое не везде работает). Либо добавив каждую сторону отдельно

Отслеживать
ответ дан 28 окт 2012 в 18:36
psyсho_Octopus psyсho_Octopus
1,062 1 1 золотой знак 11 11 серебряных знаков 19 19 бронзовых знаков

Простите, почти ничего не понял:( Какая такая верстка, поясните пожалуйста, что «можно даже не мучаться». Как это, наложить рамку отдельно, отдельно от блока? Про св-во pointer-events: none честно говоря не слыхал еще, почитаю. И опять же как это добавить каждую сторону отдельно, через border-right, border-left и т.д., так?

29 окт 2012 в 6:17

Можно просто 4 блока с абсолютным позиционированием сделать. Не знаю на сколько это грамотно, конечно.

29 окт 2012 в 16:52

Я сделал один блок с тенями поверх с абсолютным поз. и тени стало отображать, другая проблема — карта становится неактивная, когда она под блоком! Думаю, что с 4-мя блоками будет та же беда.

30 окт 2012 в 12:00

конечно не будет она кликабельна.) для это я написал про св-во pointer-events, с помощью которого можно это исправить. Если сделаете 4 блока размерами как тень, то карта будет не кликабельна только по самым краям. У вас тень пикселей 5, не страшно если человек не сможет нажать на карту и самого-самого края

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *