установить фиксированное Прозрачное фоновое изображение под сНом элементом

Question

Названия объясняет, что я хочу для того чтобы достигнуть, вот код: -

HTML

<div id="header-shadow"></div> 
<div id="block"> 
    <div id="square"></div> 
</div> 

CSS

#header-shadow { 
    background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/header-shadow.png); 
    background-repeat: repeat-x; 
    display: block; 
    width: 100%; 
    height: 10px; 
    z-index: 0; 
    position: fixed; 
    top: 100px; 
} 

#block{ 
    height:1000px; 
} 

#square{ 
    height: 100px; 
    width: 100px; background: red; 
    margin-top: 200px; 
    display: block; 
    z-index: 9999999; 
    opacity: 1; 
} 

JSFiddle

Как видите, на прокрутке #square сидит под фоновым изображением, есть ли способ показать это над #header-shadow?

Answer 1

Да, вот так, где вы можете удалить z-index и установить position: relative в #block.

#header-shadow { 
 
    background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/header-shadow.png); 
 
    background-repeat: repeat-x; 
 
    display: block; 
 
    width: 100%; 
 
    height: 10px; 
 
    position: fixed; 
 
    top: 100px; 
 
} 
 

 
#block{ 
 
    position: relative; 
 
    height:1000px; 
 
} 
 

 
#square{ 
 
    height: 100px; width: 100px; background: red; 
 
    margin-top: 200px; display: block; opacity: 1; 
 
}

<div id="header-shadow"></div> 
 
<div id="block"> 
 
    <div id="square"></div> 
 
</div>