Александр Зачиналов

Потому что итоговый порядок дочерних элементов .wrap выглядит так:
1) :before
2) img
3) :after
следовательно автоматический присвоенный z-index у img будет большим, чем у :before и изображение расположится на слой выше (между :before и :after, в соответствии с порядком вложенности). Это можно регулировать только фактическим назначением z-index'ов внутри родителя (как вы и закомментировали в примере)

https://codepen.io/TotallyCurious/pen/RJOawN

.header {
  align-items: flex-start;
}
.slogan {
  align-self: center;
}

в общем и целом называют Particles System ("Системой частиц") vincentgarreau.com/particles.js

https://codepen.io/anon/pen/GOKaOQ

Оборачиваем ваши ссылки в блок

<div id="demos-link">
  <a class="slide_button1" href="#slide1">Step1</a>
  <a class="slide_button2" href="#slide2">Step2</a>
  <a class="slide_button3" href="#slide3">Step3</a>
</div>

Добавляем в параметры инициализации карусели строку
dotsContainer: '#demos-link',

... Теперь к ссылке на активный слайд будет добавляться класс .active, его вы можете использовать для стилизации.

Это Rubster. Для web не актуальный, но можно попробовать конвертировать. Я нашел версию только без цифр - www.fonts-online.ru/font/RupsterScriptFree, хотя дизайн шрифта предполагал их наличие - revision.ru/work/76104/. Возможно у вас получится найти полную версию.

https://jsfiddle.net/3b4v7nkh/1/

Без статики никак. Динамические классы пока не научились отсеивать. Есть способ, но очень муторный. Нужно запускать статику в браузере, копировать исходный код из браузера в новый html, потом активировать все динамические элементы и снова копировать код в тот же html - запускать полученный файл для uncss. Но и этот вариант не даст 100% гарантии, так как в любом фреймворке (да и не только в них) имееются еще и временные классы, которые в коде не остаются, но для правильной работы анимаций необходимы.

для списка набросал jsfiddle.net/sreufgsx

Прорекламировали уже, беда. В верстке нет ничего похожего не меню, смотрите внимательнее. Скрипт вызова слайдеров де факто не может отключить меню, как вы не можете понять. Где оно должно быть? Хотя нет, давайте вашими же способами решать проблему...отключите слайдеры, меню заработает?

подойдет? jsfiddle.net/hxb0o7vs

А) можно на absolute, но:
1) Весь контент должен находиться в контейнере и иметь фиксированную ширину в диапазоне разрешений устройств (например как container у bootstrap)
2) Подгонять позиции блоков к листьям придется для каждого вьюпорта, т.е. минимум 4 раза (если у вас есть адаптивка вообще)

Б) мне нравиться способ, когда поверх изображения накладывают SVG, на котором расставлены прозрачные блоки с id, потом через js привязываются к ним и генерируют контент (но способ плох, если вам важен SEO для этих блоков)

B) использовать чистый canvas или библиотеки для отрисовки графики d3js, snapjs и др (красиво, удобно, гибко, но сложнее в реализации и SEO тоже пострадает)

codepen.io/JoshuaTyree/pen/MYZepb

Если список на абсолюте, то шириной родителя вы не сможете управлять на CSS, только JS - jsfiddle.net/xdfq9d9v/4