Positioning a child behind his parent with his a fixed position

Question

So here is my problem, I have a music player wich have a volume button. When I press the volume button, a box appear under the button. Since my background isn't flat, I want to put that box behind the background. I tried to play with the negative z-index, but it didn't worked. Can you guys help me out? Here's a link, the music player is on the top screen (position fixed) http://hateittoo.com/?page=shows

PS: The website works better with Google Chrome for the moment.

Answer 1

move volume_controls so it's not nested in music_player. z-index cannot go below what the parent element is.

<div id="music_player"><!-- has background image you're trying to hide controls under -->
    ... 
    <div class="content" id="volume_controls" style="display: block;">
        ...
    </div>
</div>

to tuck it behind the bg without z-index move your volume_controls element just above music_player