Javascript 如何强制子div位于父div内？

我已经开始学习JavaScript，我正在努力改进这个脚本。我希望将生成的框保持在固定的父div内，因此在不同的屏幕大小下，它将强制单击的div显示在可见区域内

函数getRandomColor（）{ 变量字母='0123456789ABCDEF'。拆分（''）； var color='#'； 对于（变量i=0；i<6；i++）{ 颜色+=字母[Math.floor（Math.random（）*16）]； } 返回颜色； } var点击时间； var创建时间； var反应时间； 函数makeBox（）{ var rndm=Math.random（）； rndm=rndm*1000； setTimeout（函数（）{ if（Math.random（）>0.5）{ document.getElementById（“box”）.style.borderRadius=“50%”； }否则{ document.getElementById（“box”）.style.borderRadius=“0px”； } var top=Math.random（）； var left=Math.random（）； top=top*340； 左=左*1000； document.getElementById（“box”）.style.position=“绝对”； document.getElementById（“box”）.style.top=top+px； document.getElementById（“box”）.style.left=left+px； document.getElementById（“box”）.style.backgroundColor=getRandomColor（）； document.getElementById（“box”）.style.display=“block”； createdTime=Date.now（）； }，rndm）； } document.getElementById（“box”）.onclick=function（）{ this.style.display=“无”； 单击时间=日期。现在（）； 反应时间=（（点击时间-创建时间）/1000）； document.getElementById（“time”）.innerHTML=reactionTime； makeBox（）； } makeBox（）

正文{
字体系列：verdana，“comic sans ms”，arial；
}
#盒子{
宽度：100px；
高度：100px；
背景色：浅绿色；
位置：相对位置；
}
p{
字体大小：粗体；
}
/*根据设备屏幕大小设置父div大小*/
#母公司{
位置：固定！重要；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
顶部：150px；
/*背景颜色：海蓝宝石*/
边框：1px纯水；
保证金：0px 3px 5px 5px；
}
#日期{
字体大小：正常！重要；
边框：1px纯蓝色；
宽度：590px；
边缘底部：20px；
}

反应游戏
测试你的反应
您的反应时间为：0秒

更改：

将父级

div

从

位置：固定
更改为
位置：相对

将

顶部

和

左侧

值从

px

更改为

%

使用

main

类添加了

div

（添加到此

div

填充底部：100px

和

填充右侧：100px；

以适应父div中的形状，如果左侧或顶部等于

100%

将高度添加到父级

div

（您可以使用媒体查询更改不同设备的高度）

从

#parent

中删除边框，添加到

.main

函数getRandomColor（）{ 变量字母='0123456789ABCDEF'。拆分（''）； var color='#'； 对于（变量i=0；i<6；i++）{ 颜色+=字母[Math.floor（Math.random（）*16）]； } 返回颜色； } var点击时间； var创建时间； var反应时间； 函数makeBox（）{ var rndm=Math.random（）； rndm=rndm*1000； setTimeout（函数（）{ if（Math.random（）>0.5）{ document.getElementById（“box”）.style.borderRadius=“50%”； }否则{ document.getElementById（“box”）.style.borderRadius=“0px”； } var top=Math.random（）； var left=Math.random（）； top=top*100； 左=左*100； document.getElementById（“box”）.style.position=“绝对”； document.getElementById（“box”）.style.top=top+“%”； document.getElementById（“box”）.style.left=left+“%”； document.getElementById（“box”）.style.backgroundColor=getRandomColor（）； document.getElementById（“box”）.style.display=“block”； createdTime=Date.now（）； }，rndm）； } document.getElementById（“box”）.onclick=function（）{ this.style.display=“无”； 单击时间=日期。现在（）； 反应时间=（（点击时间-创建时间）/1000）； document.getElementById（“time”）.innerHTML=reactionTime； makeBox（）； } makeBox（）；

正文{
字体系列：verdana，“comic sans ms”，arial；
}
#盒子{
宽度：100px；
高度：100px；
背景色：浅绿色；
位置：相对位置；
}
p{
字体大小：粗体；
}
#母公司{
位置：相对位置；
高度：300px；
保证金：0px 3px 5px 5px；
}
#日期{
字体大小：正常！重要；
边框：1px纯蓝色；
宽度：590px；
边缘底部：20px；
}
梅因先生{
填充底部：100px；
右边填充：100px；
边框：1px纯水；
}

测试你的反应
您的反应时间为：0秒

我看到您覆盖了一些css属性，如#parent position和#parent top。您应该注意只有

top:150px；

和

position:fixed！重要；

生效