CODEWITHSUNDEEP
htmlcssz-index
ben_aaron
ben_aaron

Reputation: 1532

Use z-index to overlay moving (and nested) divs

I have two divs nested within each other.

div1 is nested within div2.

see: link to fiddle

This is my problem: the red div (div1) moves within div2 and I want div1 to disappear when it moves across the boundary of div2. In other words, if the red div leaves the blue surface, it should disappear.

How would I do this or where is my mistake? I tried to wrap both into a larger div and set the z-indices so that div2 was the lowest, div1 the middle one, and the wrapper div the highest. The rationale was to have the red one disappear under the wrapper once leaving the blue div - didn't work.

As it is now, the red div just moves further regardless of being within or outside the blue div.

HTML

<div id="div2">
<div id="div1"></div>
</div>

CSS

#div1{
width: 30px;
height: 30px;
background-color: red;
position: absolute;
top: 20%;
left: 20%
}
#div2{
width: 300px;
height: 300px;
background-color: blue
}

Upvotes: 1

Views: 914

Answers (1)

Shikkediel
Shikkediel

Reputation: 5205

I reckon this is what you're after (easy to say know I know, lol) :

#div2 {
overflow: hidden;
}

By the way, you can say #div1 is placed inside #div2 but it isn't positioned there because of the absolute property. It will behave according to the first positioned parent (which isn't #div2) or body :

https://jsfiddle.net/5a1w6hd0/

And when the parent has relative positioning (could be anything as long as it's not static) :

https://jsfiddle.net/5x2bcyqe/

The overflow property will still work though (that's unrelated). Setting a z-index can be tricky too - the element needs positioning for this as well for it to take effect.

Upvotes: 2

Related Questions