There are two div elements nested within each other.
The first div is nested inside the second one.
To view this issue, click on the following: link to fiddle
My dilemma is that the red div (div1) shifts around within div2, and I would like div1 to disappear once it crosses the boundary of div2. Essentially, if the red div moves off the blue surface, it should vanish.
How can I accomplish this? Or where did I go wrong? I attempted enclosing both in a larger div and adjusting the z-index values so that div2 had the lowest value, div1 was in the middle, and the wrapper div had the highest. My reasoning was that the red one would disappear under the wrapper upon leaving the blue div - but this approach didn't succeed.
Currently, the red div continues moving without regard to its position 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
}