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



Ответил - Людмила

html - Почему z-индекс не работает? - Qaru

Почему z-индекс не работает?

Итак, если я правильно понял z-index. это было бы прекрасно в этой ситуации:

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

Во многих случаях элемент должен быть расположен для 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/

http://qaru.site/questions/66470/why-does-z-index-not-work






Ответил - Арит7

css - z-index не работает с фиксированным позиционированием - Qaru

Z-index не работает с фиксированным позиционированием

У меня есть div с позиционированием по умолчанию (т.е. position:static ) и div с позицией fixed .

Если я устанавливаю z-индексы элементов, кажется невозможным сделать неподвижный элемент за статическим элементом.

(Похоже, что у этого вопроса есть аналогичный вопрос (Исправлено размещение индекса z-индекса ), но у него нет удовлетворительного ответа, поэтому я спрашивая это здесь с моим примером кода)

http://qaru.site/questions/20139/z-index-not-working-with-fixed-positioning






Ответил - Валент Сергеевна

Свойство z-index: детальный обзор | CSS-Tricks по-русски

Естественное расположение элементов

На странице, обычное размещение элементов (я имею в виду расположение вдоль оси Z) определяется несколькими факторами. Ниже представлен список этих факторов, начиная с самых нижних элементов. В этом списке подразумевается, что ни одному из элементов явно не присваивается свойство z-index .

  1. Фон и границы элемента, определяющего контекст стека.
  2. Элементы с отрицательным контекстом стека, в порядке отображения.
  3. Непозиционированные (position: static ), а также без установленного свойства float (float: none ) блочные элементы (display: block ), в порядке отображения.
  4. Непозиционированные, с установленным свойством float. блочные элементы, в порядке отображения.
  5. Строчные (inline ) элементы, в порядке отображения.
  6. Элементы с установленным свойством position. в порядке отображения.

Корректное применение свойства z-index. может изменить естественное расположение в стеке.

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

Grey Box

Gold Box

У этих элементов разные цвета фона и границ, а последние два смещены за счёт установленного отрицательного свойства margin. Таким образом видно естественное размещение элементов, каждый следующий находится "выше" предыдущего. У этих элементов не установлено свойство z-index. их порядок размещения в стеке является естественным.

Где могут быть проблемы?

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

http://www.css-tricks.ru/articles/css/z-index





wume.ru