Фиксированный фоновый слой за прокручиваемым передним контейнером

Вот как я пытаюсь сделать контейнер-оболочку прокручиваемым над элементом нижнего колонтитула.Фиксированный фоновый слой за прокручиваемым передним контейнером

Нижний колонтитул должен быть зафиксирован в фоновом режиме, поэтому он не должен двигаться. Я хочу дать пользователю ощущение, что он перемещает слой обертки вверх, чтобы взглянуть на фиксированный фоновый нижний колонтитул.

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#wrapper { 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 0; 
 
    overflow-x: auto; 
 
    background: url(https://wallpaperscraft.com/image/nature_waterfall_summer_lake_trees_90400_3840x2160.jpg) no-repeat center center; 
 
    background-size: cover; 
 
    box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.3); 
 
} 
 
footer { 
 
    bottom: 0; 
 
    z-index: -10; 
 
    width: 100%; 
 
    height: 300px; 
 
    background: #555; 
 
}

<div id="wrapper"></div> 
 
<footer>This content should stay fixed on bottom of footer</footer>

источник

2016-03-29 user3142695

Измененный код для вас

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#wrapper { 
 
    width: 100%; 
 
    
 
    z-index: 0; 
 
    overflow-x: auto; 
 
    background: url(https://wallpaperscraft.com/image/nature_waterfall_summer_lake_trees_90400_3840x2160.jpg) no-repeat center center; 
 
    background-size: cover; 
 
    box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.3); 
 
} 
 
footer { 
 
    bottom: 0; 
 
    z-index: -10; 
 
    width: 100%; 
 
    height: 300px; 
 
    background: #555; 
 
     position: fixed; 
 
}

<div id="wrapper"> 
 
     Test</br>Test</br>Test</br>Test</br>Test</br> 
 
     Test</br>Test</br>Test</br>Test</br>Test</br> 
 
    Test</br>Test</br>Test</br>Test</br>Test</br> 
 
    Test</br>Test</br>Test</br>Test</br>Test</br> 
 
    Test</br>Test</br>Test</br>Test</br>Test</br> 
 
</div> 
 
<footer>This content should stay fixed on bottom of footer</footer>

источник

2016-03-29 20:08:09