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

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,

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

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

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

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

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

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

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

Как получить Произведение массива через рекурсию?

Артем Михневич, т.е. по-вашему незная базовую теорию и пытаться что то сделать - лучше? ну хз, ваш код говорит в корне об обратном, лучше, как сказали выше, читайте учебник и каждый раздел подкрепляйте практикой. речь идет об основах, а не каких нибудь js design patterns, js ninja и т.п.

Как задать блоку с absolute другого родителя с relative?

Можно, для этого нужно чтобы у всей цепочки родителей этого блока, кроме целевого, было position static

Есть у кого готовая сетка?

ss44v, ответ motr смотрите

Есть у кого готовая сетка?

это без сетки делается

Как верстать такое меню?

Вы там контекст потеряли, исправить можно

так

drop.mouseout(function(){
		id = setTimeout(() => {
	    $(this).removeClass('focus');
	  }, 300);
	});

или так

drop.mouseout(function(){
var _this = $(this);
id = setTimeout(function(){
_this.removeClass('focus');
}, 300);
});

Как верстать такое меню?

инструменты разработчика браузера вам в помощь

Как правильно разместить блок?

посмотрите как это реализовано на wikipedia.org

Разница .getElementsByClassName и .getElementByID?

usedtoknow, взял элемент .submenu который является ребенком .menu. потом повесил на .menu обработчик который при клике на .menu переключает вложенный в него .submenu

Разница .getElementsByClassName и .getElementByID?

usedtoknow, можно и через var подробнее, костыль не из-за этого, а из-за незнания работы javascript.

вот один из вариантов как можно решить вашу задачу

Разница .getElementsByClassName и .getElementByID?

usedtoknow, есть два способа объявления функции:

первый

function func(){
  ...
}

второй

var func = function(){
  ...
}

При первом способе объявления, функция будет доступна к выполнению уже на первой строчке скрипта, независимо от того где она была определена в скрипте, хоть на последней строчке. в вашем примере функция openMenu определена два раза, соответсвтенно второй вариант перезапишет первый и будет использоваться во всем скрипте, соответсвенно первая и вторая ссылка открывают второе подменю. можно исправить вот так: https://www.w3schools.com/code/tryit.asp?filename=...

Но на самом деле это костыль и так делать очень плохо, представьте что у вас таких менюшек на странице не 2, а 10, 50, 100... вам придется писать для каждой меню свой код.

Разница .getElementsByClassName и .getElementByID?

usedtoknow,

.sidebar_menu > li a {
	display: inline-block;
}

Проблема со вкладками (section tabs) - как поправить?

что я делаю не так

не выкладываете код

Разница .getElementsByClassName и .getElementByID?

usedtoknow, означает, что берем первый элемент из коллекции

Разница .getElementsByClassName и .getElementByID?

usedtoknow,

function openMenu() {
	document.getElementsByClassName("dropdown")[0].classList.toggle("active");
    
}

Не срабатывает toggleClass?

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

Как сверстать план концертного зала?

svg