Перекрытие элемента из нижнего z-индекса - PullRequest
Новая
       8

Перекрытие элемента из нижнего z-индекса

1 голос
/ 27 января 2011

У меня есть некоторые проблемы с пониманием наложения div в Javascript.

См. http://jsfiddle.net/CapKK/

Как вы можете видеть, зеленое поле обернуто этими двумя другими.Но как только я добавляю z-index к div1 (красное поле), он больше не работает.

Может кто-нибудь объяснить это?Почему z-индекс 0 на div1 разрушает эту настройку?

1 Ответ

2 голосов
/ 27 января 2011

Свойство z-index указывает порядок стека элемента.

Элемент с большим порядком стеков всегда находится перед элементом с более низким порядком стеков.

У div3 больший порядок стеков, поэтому он находится спереди.

Если позже вы добавите больше элементов на страницу, у вас будет пространство для их наложения без необходимости регулировать значения z-index всех других элементов. Например: 

* 100 for my top-most element
* 0 for my middle element
* -100 for my bottom element

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

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

* element 1 — z-index of -25
* element 2 — z-index of 82
* element 3 — z-index not set
* element 4 — z-index of 10
* element 5 — z-index of -3

Они будут складываться в следующем порядке:

  1. элемент 2
  2. элемент 4
  3. элемент 3
  4. элемент 5
  5. элемент 1
...