Javascript 子div的随机定位有时会溢出父div。如何停止/防止这种情况？_Javascript_Html_Position_Overflow

Javascript 子div的随机定位有时会溢出父div。如何停止/防止这种情况？

javascript html

Javascript 子div的随机定位有时会溢出父div。如何停止/防止这种情况？,javascript,html,position,overflow,Javascript,Html,Position,Overflow,每次刷新页面时，子div的定位有时会溢出，或者将自身定位在父div之外。有没有办法防止这种情况？我试着玩弄子div的大小以及的“top”和的“left”值，但运气不好代码如下： #box { width: 1000px; height: 400px; background-color: grey; margin: 0; padding: 0; }

每次刷新页面时，

子div

的定位有时会溢出，或者将自身定位在

父div

之外。有没有办法防止这种情况？我试着玩弄

子div

的大小以及

的“top”

和

的“left”

值，但运气不好

代码如下：

#box {
            width: 1000px;
            height: 400px;
            background-color: grey;
            margin: 0;
            padding: 0;
        }

        #shape {
            display: none;
            position: relative;
        }

    </style>
</head>
<body>
    <div id="box">
        <div id="shape"></div>
    </div>
    <script>
        function makeShapeAppear() {
            var top = Math.floor(Math.random() * 301);
            var left = Math.floor(Math.random() * 901);
            var size = Math.floor(Math.random() * 101) + 50;
            document.getElementById("shape").style.display = "block"
            document.getElementById("shape").style.top = top + "px";
            document.getElementById("shape").style.left = left + "px";
            document.getElementById("shape").style.width = size + "px";
            document.getElementById("shape").style.height = size + "px";
            document.getElementById("shape").style.backgroundColor = "red";}
</script>
</body>

#框{
宽度：1000px；
高度：400px；
背景颜色：灰色；
保证金：0；
填充：0；
}
#形状{
显示：无；
位置：相对位置；
}
函数makeShapeAppear（）{
var top=Math.floor（Math.random（）*301）；
var left=Math.floor（Math.random（）*901）；
var size=Math.floor（Math.random（）*101）+50；
document.getElementById（“形状”）.style.display=“块”
document.getElementById（“shape”）.style.top=top+px；
document.getElementById（“shape”）.style.left=left+px；
document.getElementById（“shape”）.style.width=size+“px”；
document.getElementById（“shape”）.style.height=size+“px”；
document.getElementById（“shape”）.style.backgroundColor=“red”；}

提前谢谢。

发生这种情况的原因是您没有考虑孩子的随机大小

var size = Math.floor(Math.random() * 101) + 50;

这条生产线可以生产150码

var top = Math.floor(Math.random() * 301);

这条线最多可以设置300

父div的高度只有400px，因此如果计算的大小为150，顶部为300，那么子div将使底部的父div溢出50px。设置left时也会出现类似的情况，这将导致子对象在父对象的右侧溢出。您需要约束顶部和左侧。下面的例子

函数makeShapeAppear（）{
var size=Math.floor（Math.random（）*101）+50；
var top=Math.min（Math.floor（Math.random（）*101），180-size；
var left=Math.min（Math.floor（Math.random（）*301），400-size）；
document.getElementById（“形状”）.style.display=“块”
document.getElementById（“shape”）.style.top=top+px；
document.getElementById（“shape”）.style.left=left+px；
document.getElementById（“shape”）.style.width=size+“px”；
document.getElementById（“shape”）.style.height=size+“px”；
document.getElementById（“形状”）.style.backgroundColor=“红色”；
setTimeout（函数（）{makeShapeAppear（）；}，1000）；
}
makeshapeaper（）
#框{
宽度：400px；
高度：180像素；
背景颜色：灰色；
保证金：0；
填充：0；
}
#形状{
显示：无；
位置：相对位置；
}

您需要相对位置吗？尝试不使用它并添加溢出：隐藏到框谢谢您的回复！我认为大小变量末尾的“+50”会创建一个最小范围。然而，我并没有严格地使用你们的答案，我只是从左上角的变量中减去了50。即：var top=Math.floor（Math.random（）*251）；var left=Math.floor（Math.random（）*851）；这似乎解决了问题。