Взаимоотношение 2 Дивизион

Question

Imagine div1 и div2. div1 имеет ширину 100% и высоту 800 пикселей. div2 привязан к вершине браузера, также имеет 100% ширину и может быть 3000 пикселей в высоту. Я пытаюсь приземлиться, поэтому вы видите div1, но, когда вы прокручиваете вниз, div1 сползает с пути, показывая div2 и все, что у него есть. Кажется легким, но я не могу понять это.

div1 { 
    width:100%; 
    height: 800px; 
    position: ???; 
    z-index:100; 
    background-color: white; 
} 


div2 { 
    width:100% 
    height: 3000px; 
    position: fixed; 
    background-color: black; 
} 

Answer 1

Во-первых, ваш пример кода имеет некоторые недостатки, такие как неправильные CSS селекторов (если вы не создали пользовательские теги, названные «div1» и т.д.), недостающий окончание ; в правиле CSS div2 (width:100%). Вам также нужно поместить ваш фиксированный div влево/вправо 0, чтобы поместить его за движущийся div.

Чтобы сделать ваш движущийся div перемещаем, добавьте bottom margin размер height и прокрутите его из поля зрения/просмотра.

Этот метод иногда называют параллакс прокрутки и here is a post showing more how/what one can do

.div1 { 
 
    width:100%; 
 
    height: 800px; 
 
    position: relative; 
 
    z-index:100; 
 
    background-color: white; 
 
    margin-bottom: 800px; 
 
} 
 

 

 
.div2 { 
 
top: 0; 
 
left:0; 
 
width:100%; 
 
height: 3000px; 
 
position: fixed; 
 
background-color: black; 
 
}

<div class="div1"></div> 
 
<div class="div2"></div>