JQuery fadeTo affects siblings?

Question

The fadeTo() function isn't working like I expect it should.

My HTML structure is this:

<div id="headerBlog"></div>
<div id="headerBlog2"></div>

<div id="menuBlog">
       <h1>Blog</h1>
       <ol id="nav">
           <li><a href="index.html"><img class="navButton" src="images/vcircleLeft.svg"/></a>
           <li><a href="index.html">Homepage</a></li>
       </ol>
</div>

The elements of menuBlog are displayed on the headerBlog. headerBlog has an background-image. Beneath the headerBlog is headerBlog2, which has also a background-image. Now when I try to use fadeTo() on headerBlog, to create a crossfade, the elements of menuBlog disappear suddenly and slowly fade in again. How can that happen, as they are just sibling nodes?

My JQuery code is like this:

setInterval(fadeBackground, 2000);

function fadeBackground() {
    var header = $('#headerBlog');
    header.fadeTo(4000, 0);
}

Here is the jsFiddle: http://jsfiddle.net/ztt96da0/

Answer 1

Remember that for z-index to work, you will need to use either relative or absolute positioning. By not declaring these properties on both the #headerBlog and #menuBlog, the stacking order defined by your z-index will not work as intended.

Also, there is no good reason to use negative z-indexes in your example. Change the z-index to positive values, and set the #menuBlog z-index to the highest value for it to stay on top:

#headerBlog { 
    z-index: 2;
    position: relative;
}
#headerBlog2 { 
    z-index: 1;
    position: absolute;
}
#menuBlog {
    height: 0px;
    position: relative;
    z-index: 10;
}

See working fiddle here: http://jsfiddle.net/ztt96da0/1/