HTML, CSS, z-index

Question

HTML, CSS, z-index

0

Я не могу понять что-то с z-index. Если вы посмотрите на эту скрипку, вы увидите, что за div есть скрытый диапазон.

Я узнал, что все элементы имеют z-index: 'auto'; в котором говорится, что они наследуют z-индекс от своих родителей, единственным элементом, который имеет z-index, является элемент html с z-index: 0; , поэтому, если то, что я только что сказал, верно, все элементы (with position absolute, fixed, relative) по умолчанию должны иметь z-index: 'auto'; который в основном z-index: 0; ,

Теперь, если вы посмотрите на эту скрипку, я установил z-index: 0; для элемента div и, к моему удивлению, диапазон больше не скрыт, я удивлен, потому что по умолчанию z-index для div должен быть 0, а div должен скрывать span.

Поэтому мой вопрос - почему, когда я устанавливаю z-index: 0; для элемента div span больше не скрывается, я имею в виду, что промежуток должен оставаться скрытым?

Aviel Fedida 10 май 2014, в 19:59

Источник

1

philipwalton.com/articles/what-no-one-told-you-about-z-index
CBroe 10 май 2014, в 17:14
1

Ваш промежуток внутри div и, следовательно, останется выше, несмотря ни на что. Теперь обратите внимание, что если вы переместите свой диапазон за пределы, то он будет одинаково восприниматься как новый брат (div) и в этом случае останется скрытым.
AVK 10 май 2014, в 17:47
0

Я понимаю это, но если вы посмотрите на обе мои ссылки, какая разница, когда я добавлю z-index: 0; в div, когда по умолчанию используется z-index: 0;
Aviel Fedida 10 май 2014, в 17:51

Показать ещё 1 комментарий

Теги:

html

css

1 ответ

Ещё вопросы

philipwalton.com/articles/what-no-one-told-you-about-z-index
Ваш промежуток внутри div и, следовательно, останется выше, несмотря ни на что. Теперь обратите внимание, что если вы переместите свой диапазон за пределы, то он будет одинаково восприниматься как новый брат (div) и в этом случае останется скрытым.
Я понимаю это, но если вы посмотрите на обе мои ссылки, какая разница, когда я добавлю z-index: 0; в div, когда по умолчанию используется z-index: 0;

Jc. · Accepted Answer · 2014-05-11T07-04-00.000Z

Надеюсь, это поможет.

Значение по умолчанию: auto

Спецификация имеет это, чтобы сказать о значении по умолчанию, auto:

Уровень стека сгенерированного поля в текущем контексте стека совпадает с его родительским полем. В поле не устанавливается новый локальный контекст стекирования (CSS2.1: 9.9.1)

Это означает: вы можете обрабатывать любой элемент с помощью z-index:auto как z-index:0 Но разница - z-index:auto не будет устанавливать контекст стекирования, но последний делает.

Вы можете понимать фразу "stacking context" как новый содержащий блоки, установленные элементом, z-индекс которого не auto.

Чтобы увидеть вашу проблему конкретно:

1) span{z-index:-1} и нет явного z-индекса для div, фактически прямо сейчас div{z-index:auto}

Учитывая правила стекирования, div не устанавливает новый контекст стекирования, поэтому его дочерний элемент помещается в тот же контекст стека, что и элемент body.Иными словами, диапазон находится за элементом body.

2) span{z-index:-1} & div{z-index:0;}

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

PS Правила стекирования не похожи на CSS2.1. ;-)