绝对定位的元素在离开容器边界时变得不可见 [英] Absolutely positioned element becoming invisible when it leaves container bounds

问题描述

请参阅 jsfiddle

HTML：

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

CSS：

CSS:

#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;
}

JS：

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

问题：
div2在离开父级界限。我如何解决这个问题，而无需更改div2的父级。我也无法在应用程序中改变div的宽度和高度。

Problem: div2 becomes invisible when it leaves its parent's bounds. how can i fix this without changing parent of div2. also i cannot change width and height of the divs in my application.

推荐答案

更改 z-index： 1; on div1 to z-index：3;
FIDDLE

Change z-index:1; on div1 to z-index:3; FIDDLE

#div1
{
position:absolute;
width:200px;
height:200px;
background-color: yellow;
left:0px;
top:0px;
z-index:3; // change this to a number higher than others
}

这篇关于绝对定位的元素在离开容器边界时变得不可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！