Почему при прокрутке индекс не помогает перекрыть фиксированный блок?

Question

[Ingernirated]

Всем привет!
Подскажите, почему блоки при прокрутке не видно, хотя у них индекс выше?
Как сделать первый блок фиксированным, а остальные идущие вдоль за ним при прокрутке видимыми и перекрывающими его?
https://jsfiddle.net/eavdx589/3/

Answer 1

[Stalker_RED]

https://jsfiddle.net/pdn5cht3/

Вся соль в position, при auto свойство z-index наследуется от родительского блока.
transform: translate добавлен только для сдвига вправо, чтобы было видно как блоки проходят над fixed блоком.

И как правильно заметил Alex, z-index в этом примере вообще не нужен https://jsfiddle.net/pdn5cht3/1/

Comments

[Ingernirated]

Высота фиксированного блока в итоге превышает 100% значительно.
А они должны быть три одноразмерных.

[Stalker_RED]

Ingernirated, 1. вы ранее не упоминали об этом требовании, но они и так одинаковые по высоте https://jsfiddle.net/pdn5cht3/5/
Вы учитываете, что блок head зафиксирован, и не сдвигается при скролле?

Answer 2

[Александр]

.boxes {
	width:100%;
	height:100vh;
	background-color:green;
	position: relative;
	z-index:100;
}

Comments

[Ingernirated]

Но теперь первый блок не 100%, а больше
https://jsfiddle.net/eavdx589/17/

Answer 3

[alex]

1. уберите везде z-index, он тут не нужен.
2. .slider и .boxes поставьте position relative

Comments

[Ingernirated]

Не помогло, а если вернуть отступ в body, то первый блок не 100%, а гораздо больше
https://jsfiddle.net/eavdx589/15/

[alex]

Ingernirated, потому что у вас там padding top 100vh

[Ingernirated]

Alex, допустим, мы его убираем, как в примере, который я вам скинул, тогда первого блока вообще нет.

[alex]

Ingernirated,

тогда первого блока вообще нет

правильно, потому что он fixed, его нет в потоке, поэтому его закрыли 2 и 3 блоки.

то первый блок не 100%, а гораздо больше

еще раз - потому что у вас там padding top 100vh, для html и body, в итоге 200 vh получается

https://jsfiddle.net/alexbie/1pft0e6m/

[Ingernirated]

Alex, спасибо, забыл, что для двоих стоит!

[Ingernirated]

Alex, подскажи ещё пожалуйста, может я что-то не то читал про позиционирование, но почему в данной ситуации только относительно позиционирование реагирует на то, чтобы быть сдвинутым вниз на отступ body и быть корректно отображено?
И почему так вышло, что статическая позиция и индекс не смогли решить мою проблему, а остались всё ровно в тени и меньших размеров?

[alex]

Ingernirated,

spoiler

относительно позиционирование реагирует на то, чтобы быть сдвинутым вниз на отступ body

позиционирование не играт ни какой роли, в данном случае блоки сдвинулись вниз из-за того что мы поставили padding-top 100vh для body, он то и сдвинул весь поток вниз, кроме первого блока, т.к. он вне потока из-за position fixed

статическая позиция и индекс не смогли решить мою проблему

z-index на элементе у которого posirion static - не имеет никакого эффекта, чтобы z-index заработал нужно создать на блоке контекст наложения. контекст налождения у блока создают ряд свойств, среди которых есть свойство position с любым значение кроме static(оно же значение по умолчанию). блок с контекстом всегда будет выше(по оси Z) блока без контекста. именно поэтому ваш первый красный блок перекрыл остальные блоки, т.к. у красного был контекст(position fixed), а у остальных не было. поставив position relative двум последним блокам мы создали им контекст и они перестали перкрываться красным блоком. почему в конкретно этом примере не нужен z-index? потому что блоки с контекстами и без z-index перкрывают друг друга в том порядке в ктором они опредены в разметке. в вашем случае красный блок ниже всех, второй - жеотый, третий - зеленый

[Ingernirated]

Alex, весьма благодарен, не знал этого нюанса про статик и его индекс.