How to display non fixed elements above fixed elements

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/

What is it exactly that you're trying to accomplish which is failing? — Daniel Sanchez, Aug 15 '14 at 18:50
If I understand correctly, you want your blue sky to stay behind your cities? — Bobo, Aug 15 '14 at 18:51
I'm not exactly sure I understand what it is you are trying to accomplish... If I understand properly... Have you tried using a negative index for your fixed elements? You can create a class in css `.negativeZIndex{z-index:-1000;}` and then after your effects occur add that class to the elements you would like to hide behind your city skyline image using `.addClass(".negativeZIndex");`. I just tried this and it worked for me — ctwheels, Aug 15 '14 at 18:52
`.addClass("negativeZIndex");` * accidentally dropped a dot in there, too late to edit last post — ctwheels, Aug 15 '14 at 18:58
I have tried negative z index on .blue, as well as positive z-index on the image. Can you give me a jsfiddle to demonstrate it working? — Goose, Aug 15 '14 at 19:17
possible duplicate of [z-index not working with fixed positioning](http://stackoverflow.com/questions/5218927/z-index-not-working-with-fixed-positioning) — Robbie Wxyz, Aug 15 '14 at 19:20
SuperScript's link seems to resolve your issue. Does that make this a duplicate then? — Daniel Sanchez, Aug 15 '14 at 19:26
It does work for me too, so I suppose it is a duplicate. No z-index needed, just position: relative; to the city image. — Goose, Aug 15 '14 at 19:28
Might be duplicate for z-index issue, however I don't think that was the answer the op was looking for. Was more an issue with his code for which the op thought could be fixed using z-index, although using z-index was only part of the answer. — ctwheels, Aug 15 '14 at 19:39

score 0 · Answer 1 · answered Aug 15 '14 at 19:29

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

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

HTML

<body>
    <div class="blue"></div>
     <h2 id="text1">a web design demonstration</h2>

     <h3 id="text2">by cory</h3>

    <img id="cloud2" src="http://www.rapitech.net/wp-content/uploads/2013/11/tumblr_ms59qmrRWf1s5jjtzo1_r1_500.png">
    <img id="jacksonville" src="http://upload.wikimedia.org/wikipedia/commons/f/fc/Cincinnati_Skyline_Outline.png" class="img-responsive" alt="Responsive image">
</body>

CSS

html {
    background-color: black;
    overflow-x: hidden;
}
body {
    display: none;
    background-color: #6e8eb5;
}
#cloud2 {
    margin-top:800px;
    left: -100px;
    height:150px;
    opacity: 0.4;
}
#text1, #text2 {
    opacity: 0.0;
    color: black;
    font-family: Georgia, serif;
    color: white;
    position: fixed;
    margin-bottom: 200px;
    width: 75%;
    left: 50%;
    margin: 0 0 0 -37.5%;
    text-align:center;
}
.blue {
    position:fixed;
    height: 100%;
    width: 100%;
    background-color: #6e8eb5;
    z-index:-100;
}

JS

$("body").fadeIn(2000);

$("html, body").animate({
    scrollTop: $(document).height()
}, 8000);

$("#cloud2").animate({
    opacity: 0.8,
    marginLeft: "110%"
}, 30000);

$("#text1").delay(1500).animate({
    opacity: 0.5,
    marginTop: "15%"
}, 4000);
$("#text2").delay(5000).animate({
    opacity: 0.5,
    marginTop: "20%"
}, 4000);
$("#text1").delay(500).animate({
    opacity: 0.0,
    marginLeft: "60%"
}, 2000);
$("#text2").delay(1500).animate({
    opacity: 0.0,
    marginLeft: "30%"
}, 2000);

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

How to display non fixed elements above fixed elements

1 Answers1