Javascript 绝对定位元素离开容器边界时不可见

看到这个了吗

HTML:

<div id="div1">
    <div id="div2"></div>
</div>
<div id="div3"></div>
<p>How can i make div2 appear on screen?</p>

#div1
{
position:absolute;
    width:200px;
    height:200px;
    background-color: yellow;
    left:0px;
    top:0px;
    z-index:1;
}

#div2
{
position:absolute;    
    background-color:green;
    left:30px;
    top:30px;
    width:30px;
    height:30px;
    z-index:2;
}

#div3
{
    position:absolute;
    left:200px;
    top:0px;
    width:200px;
    height:200px;
    background-color:red;
    z-index:1;
}

var left = 0;
var div = document.getElementById("div2");
window.setInterval(function()
                   {
                  div.style.left = left + "px";
                       left = (left + 5) % 370;
                   }, 30);

JS:

<div id="div1">
    <div id="div2"></div>
</div>
<div id="div3"></div>
<p>How can i make div2 appear on screen?</p>

#div1
{
position:absolute;
    width:200px;
    height:200px;
    background-color: yellow;
    left:0px;
    top:0px;
    z-index:1;
}

#div2
{
position:absolute;    
    background-color:green;
    left:30px;
    top:30px;
    width:30px;
    height:30px;
    z-index:2;
}

#div3
{
    position:absolute;
    left:200px;
    top:0px;
    width:200px;
    height:200px;
    background-color:red;
    z-index:1;
}

var left = 0;
var div = document.getElementById("div2");
window.setInterval(function()
                   {
                  div.style.left = left + "px";
                       left = (left + 5) % 370;
                   }, 30);

问题：

---

div2离开其父级边界时将不可见。如何在不更改div2的父级的情况下修复此问题。我也不能在我的应用程序中更改div的宽度和高度。

更改

z-index:1到
z-index:3

您只需要将div1上的z索引改为高于其他索引。听起来父级上有一个
溢出：hidden
？（摘自简短的略读）。如果要在父边界框之外显示，请确保没有隐藏溢出。