Two fiddles. The first, showing everything working as I want:

The second, showing the problem as it exists on the site I'm trying to deploy the effect on: /

Those fiddles describe everything this code does, but for thoroughness:

I have two container divs bumped up to one another, the first of which contains an imagel which I have simplified to <div id="image"> for this example.

<div id="container">
    <div id="image"></div>
</div>
<div id="never_cover_me">
</div>

They are styled as follows, and theses styles will exhibit the issue, which I'll explain when I show the js.

#container{
    height: 400px;
    width: 400px;
    background: blue;
    position: relative;
    z-index: 200;
}

#image{
    height: 200px;
    width: 200px;
    background: red;
    position: relative;
    top: 200px;
    left: 100px;
    z-index: 50;
}

#never_cover_me {
    position: relative;
    height: 400px;
    width: 400px;
    background: yellow;
    z-index: 100;
}

Lastly, some Jquery/JS moves the image down, thus into the space of #never_cover_me. If all was well in the world, #image would be covered by #never_cover_me while it was moved down, but since #container has a higher z-index than #never_cover_me, obviously that isn't the case and the image is instead drawn over #never_cover_me.

$(document).ready(function(){
    setInterval(
         function(){
            $('#image').animate({top: '+=200px'}, "slow", function(){
                $('#image').delay(1000).animate({top: '-=200px'}, "slow")
            });
         },3000
    );
});

For various reasons, #container MUST have a higher z-index than #never_cover_me. Semantically, I would prefer if #image stays within #container.

Ideas?

Two fiddles. The first, showing everything working as I want: http://jsfiddle/3SWwD

The second, showing the problem as it exists on the site I'm trying to deploy the effect on: http://jsfiddle/3SWwD/1/

Those fiddles describe everything this code does, but for thoroughness:

I have two container divs bumped up to one another, the first of which contains an imagel which I have simplified to <div id="image"> for this example.

<div id="container">
    <div id="image"></div>
</div>
<div id="never_cover_me">
</div>

They are styled as follows, and theses styles will exhibit the issue, which I'll explain when I show the js.

#container{
    height: 400px;
    width: 400px;
    background: blue;
    position: relative;
    z-index: 200;
}

#image{
    height: 200px;
    width: 200px;
    background: red;
    position: relative;
    top: 200px;
    left: 100px;
    z-index: 50;
}

#never_cover_me {
    position: relative;
    height: 400px;
    width: 400px;
    background: yellow;
    z-index: 100;
}

Lastly, some Jquery/JS moves the image down, thus into the space of #never_cover_me. If all was well in the world, #image would be covered by #never_cover_me while it was moved down, but since #container has a higher z-index than #never_cover_me, obviously that isn't the case and the image is instead drawn over #never_cover_me.

$(document).ready(function(){
    setInterval(
         function(){
            $('#image').animate({top: '+=200px'}, "slow", function(){
                $('#image').delay(1000).animate({top: '-=200px'}, "slow")
            });
         },3000
    );
});

For various reasons, #container MUST have a higher z-index than #never_cover_me. Semantically, I would prefer if #image stays within #container.

Ideas?

• javascript
• jquery
• html
• css

• 1 If the first one works, can't you just swap the current code with the existing code on the site...? – user3117575 Commented Jun 11, 2014 at 22:12
• As I say at the bottom, for various reasons the z-index of #container must be higher than #never_cover_me. The addition of that caveat in the second fiddle is what breaks it. – fildred13 Commented Jun 11, 2014 at 22:13
• If you visualize this in 3d your #container would be in front of never_cover_me but what you are asking is that #container should be behind. Even if you break the image off the container you'll never achieve the effect. Just visualize it in real world. The only way it can be achieved is if never_cover_me has higher z-index than container. – mohkhan Commented Jun 11, 2014 at 22:17
• Then you are trying to create an Escher Cascade since you want #container being higher than #never_cover_me and #image (which is inside #container), being lower than #never_cover_me. What if you take #image outside of #container? – Roberto Linares Commented Jun 11, 2014 at 22:18
• Sorry if I made it seem like I wanted to force the heights to be different. I was thinking about maybe a pseudo element that was invisible but which I could use to hide the element, I need to achieve the APPEARANCE of the image going behind the #never_cover_me, not to actually put it behind it. Anyways, I solved it. See my answer in a moment. – fildred13 Commented Jun 11, 2014 at 22:24

2 Answers 2

The #container:

z-index: 200;

is above #never_cover_me:

z-index: 100;

Therefore, it is causing the issue you are experiencing. Here is more information on stacking order and how descendants are affected.

https://developer.mozilla/en-US/docs/Web/Guide/CSS/Understanding_z_index/Stacking_and_float

You shouldn't really try to use other elements to hide your content. A better solution would be to set overflow:hidden; on #container because the effect you are going for is "hide this when the block is outside the current element."

It was as easy as adding overflow:hidden to #container.

Fiddle: http://jsfiddle/3SWwD/2/