Покрывание одного блока другим при скроллинге, как [ПРИМЕР]?

Question

[Nikita Hordiyenko]

forwardtheory.co.uk - пример (Второй "секшн" покрывает первый, как это сделать?

Comments

[Ankhena]

position fixed первому блоку и z-index
дополнительно погуглите по слову параллакс

[Dima Polos]

Просто спасибо, мне дизайн сайта понравился, очень классный! По поводу "как сделать" уже много написали, а так, все открыто в вебе, открываете девтулз и разбираете цсс)

[Nikita Hordiyenko]

Dima Polos, Спасибо, я думал css никак не посмотреть :)

[Dima Polos]

Nikita Hordiyenko, заходите в хром, например, на страницу, которую хотите изучить, нажимаете правой кнопкой мыши и выбираете посмотреть код страницы, или если вдруг разрабы сайта заблочили правую кнопку мыши, то жмете ctrl+shift+i далее смотрите на вкладку, в появившемся окне, Elements, видите разметку HTML, выбираете любой элемент и внизу, сбоку или еще где будет Styles. Сверху слева есть иконка прямоугольник с курсором, если нажать, то мылкой можно прямо на странице наводить на элемент и видеть его стили. Если в вкладке стили нажать дважды на любое свойство, можно его отредактировать (изменения не сохранятся, но визуально можно экспериментировать), там еще есть добавить новый стиль, и все такое прочее. Можно посмотреть вкладку Sources, увидите папки, полазить там не мешает, найдете css цельным файлом. Есть еще и такой вариант: открываете страницу, нажимаете ctrl+u и видите разметку HTML в новой вкладке, там будут ссылки на картинки, js, css, если на них кликнуть - можно читать исходники. Есть правда ньюансы, типа код пережатый, но тогда можно самый первый вариант пробовать, который вначале я описал.

[Nikita Hordiyenko]

Ankhena, Спасибо, крутой эффект :)

[Nikita Hordiyenko]

Dima Polos, Спасибо :)

Answer 1

[aloky]

dl4.joxi.net/drive/2018/01/01/0022/1330/1500466/66...
dl4.joxi.net/drive/2018/01/01/0022/1330/1500466/66...

#section1 {
z-index: 1;
}
#section2 {
z-index: 2;
}

Comments

[Nikita Hordiyenko]

Спасибо большое