CSS: сделать div слайд над другим div (т. Е. Использовать div как фон)

Question

У меня есть div, который действует как фон страницы, и другие divs показывают над ним.

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

Это мой фактический код:

#background { 
    z-index: 1; 
    width: 100%; 
    height: 100vh; 
    position: fixed; 
} 
#content { 
    z-index: 99; 
    position: absolute; 
    top: 2em; 
    padding: 1em 1em; 
    width: 100%; 
} 

это может быть сделано? Спасибо

Answer 1

При использовании position: fixed вам необходимо также указать значения для положения элемента.

демонстрирует это:

HTML:

<div id="background"></div> 
<div id="content"> 
    This is the content 
</div> 

CSS:

#background { 
    z-index: 1; 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    top: 0; 
    left: 0; 
    background-image: url(https://wallpaperscraft.com/image/metal_lines_stripes_light_shiny_silver_18401_1920x1080.jpg); 
} 
#content { 
    z-index: 99; 
    position: absolute; 
    top: 2em; 
    padding: 1em 1em; 
    width: 100%; 
    color: blue; 
    font-size: 300%; 
    height: 400%; 
} 

Answer 2

вы можете увидеть демонстрационную страницу:

body, html, main { 
    /* important */ 
    height: 100%; 
} 

.cd-fixed-bg { 
    min-height: 100%; 
    background-size: cover; 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
    background-position: center center; 
} 

.cd-fixed-bg.cd-bg-1 { 
    background-image: url("http://farm5.static.flickr.com/4056/4228935406_93ff14c971.jpg"); 
} 
.cd-fixed-bg.cd-bg-2 { 
    background-image: url("http://farm5.static.flickr.com/4056/4228935406_93ff14c971.jpg"); 
} 
.cd-fixed-bg.cd-bg-3 { 
    background-image: url("http://farm5.static.flickr.com/4056/4228935406_93ff14c971.jpg"); 
} 
.cd-fixed-bg.cd-bg-4 { 
    background-image: url("http://farm5.static.flickr.com/4056/4228935406_93ff14c971.jpg"); 
} 

.cd-scrolling-bg { 
    min-height: 100%; 
} 

HERE MY DEMO