Feste Hintergrundebene hinter scrollbarem Front-Container

So versuche ich, den Wrapper-Container über das Fußzeilenelement scrollbar zu machen.Feste Hintergrundebene hinter scrollbarem Front-Container

Die Fußzeile sollte im Hintergrund fixiert sein, so dass sie sich nicht bewegen sollte. Ich möchte dem Benutzer das Gefühl geben, dass er die Wrapperschicht nach oben bewegt, um einen Blick auf die feste Hintergrundfußzeile zu werfen.

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>

Quelle

2016-03-29 user3142695

Der bearbeitete Code für Sie

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>

Quelle

2016-03-29 20:08:09