How to display non fixed elements above fixed elements

By : Goose
Source: Stackoverflow.com
Question!

I have a page with both fixed and non fixed elements. I am using a div to make the background blue, and then fading it out to reveal the black background behind it in the html css. The problem is, my skyline image is not fixed, and nothing can push it above the fixed elements, not even z-indexing. What's the appropriate way to push this element above the fixed background div.

The problem in short, is I want my blue sky behind my cities.

Here's the css for the blue background div

.blue {
position:fixed;
height: 100%;
width: 100%;
background-color: #6e8eb5;
}

Here's how I'm fading it out.

$( ".blue" ).delay( 12000 ).fadeOut(2000);

Here's my jsfiddle.

http://jsfiddle.net/wzrjL68s/

By : Goose


Answers

Here: http://jsfiddle.net/ctwheels/wzrjL68s/5/

I've also fixed position of elements, etc. as I suppose you intended to position them

HTML

By : ctwheels


This video can help you solving your question :)
By: admin