(так надо)
не будет правильно работать
e.stopPropagation()
относительно позиционирование реагирует на то, чтобы быть сдвинутым вниз на отступ bodyпозиционирование не играт ни какой роли, в данном случае блоки сдвинулись вниз из-за того что мы поставили padding-top 100vh для body, он то и сдвинул весь поток вниз, кроме первого блока, т.к. он вне потока из-за position fixed
статическая позиция и индекс не смогли решить мою проблемуz-index на элементе у которого posirion static - не имеет никакого эффекта, чтобы z-index заработал нужно создать на блоке контекст наложения. контекст налождения у блока создают ряд свойств, среди которых есть свойство position с любым значение кроме static(оно же значение по умолчанию). блок с контекстом всегда будет выше(по оси Z) блока без контекста. именно поэтому ваш первый красный блок перекрыл остальные блоки, т.к. у красного был контекст(position fixed), а у остальных не было. поставив position relative двум последним блокам мы создали им контекст и они перестали перкрываться красным блоком. почему в конкретно этом примере не нужен z-index? потому что блоки с контекстами и без z-index перкрывают друг друга в том порядке в ктором они опредены в разметке. в вашем случае красный блок ниже всех, второй - жеотый, третий - зеленый
тогда первого блока вообще нетправильно, потому что он fixed, его нет в потоке, поэтому его закрыли 2 и 3 блоки.
то первый блок не 100%, а гораздо большееще раз - потому что у вас там padding top 100vh, для html и body, в итоге 200 vh получается
