Javascript 为什么我的div在移动时不与我的另一个div呆在一起？

我试图让蓝色的“盾牌”div覆盖红色的“按钮”div在点击3次后，但它没有正确地覆盖它。。。它要么太过左，要么太过右，等等。我不知道如何修复它。我尝试过调整randomplace变量，但似乎不起作用。有人能帮忙吗

<div id="shield"></div>
<div id="button" onclick="buttonmes()">
   <div id="message"></div>
</div>
<style>
    #button {height:200px; width:200px; background-color:red;position:absolute;top:50%;left:50%;border-radius:50%;}
    #button:active{transform:scale(0.9,0.9);}
    #message{position:relative;top:50%;left:35%;}
    #shield{height:200px;width:200px;background-color:blue;visibility:hidden;position:absolute;top:50%;left:50%;}
</style>
<script>
    var clicknum = 0;
    var showme = document.getElementById("shield");
    function randomloc() {
        var randomlyPlace = function(el){
            el.style.position = "absolute";
            el.style.top = Math.floor(Math.random()*document.body.clientHeight);
            el.style.left = Math.floor(Math.random()*document.body.clientWidth);
        };

        randomlyPlace(document.getElementById('shield'));
        randomlyPlace(document.getElementById('button'));

    }
    function buttonmes() { 
        if (clicknum === 0) {
            document.getElementById("message").innerHTML = "Hey stop it!";
            clicknum++;
            randomloc();
        }
        else if (clicknum === 1) {
            document.getElementById("message").innerHTML = "I said stop!";
            clicknum++;
            randomloc();

        }
        else if (clicknum === 2){

            document.getElementById("message").innerHTML = "Ha! Now you can't get me!";
            showme.style.visibility = "visible";
            clicknum++
        }
        else if (clicknum === 3) {
            showme.style.visibility = "hidden";
            document.getElementById("message").innerHTML = "How did you get me!?!";
            clicknum++;
        }
    }
</script>

#按钮{高度：200px；宽度：200px；背景色：红色；位置：绝对；顶部：50%；左侧：50%；边框半径：50%；}
#按钮：活动{变换：缩放（0.9,0.9）；}
#消息{位置：相对；顶部：50%；左侧：35%；}
#屏蔽{高度：200px；宽度：200px；背景色：蓝色；可见性：隐藏；位置：绝对；顶部：50%；左侧：50%；}
var clicknum=0；
var showme=document.getElementById（“屏蔽”）；
函数randomloc（）{
var randomlyPlace=函数（el）{
el.style.position=“绝对”；
el.style.top=Math.floor（Math.random（）*document.body.clientHeight）；
el.style.left=Math.floor（Math.random（）*document.body.clientWidth）；
};
randomlyPlace（document.getElementById（'shield'））；
randomlyPlace（document.getElementById（'button'））；
}
函数按钮ms（）{
如果（clicknum==0）{
document.getElementById（“message”）.innerHTML=“嘿，住手！”；
clicknum++；
randomloc（）；
}
否则如果（单击数量===1）{
document.getElementById（“message”）.innerHTML=“我说了停止！”；
clicknum++；
randomloc（）；
}
否则如果（单击num==2）{
document.getElementById（“message”）.innerHTML=“哈！现在你找不到我了！”；
showme.style.visibility=“可见”；
clicknum++
}
否则如果（单击num==3）{
showme.style.visibility=“隐藏”；
document.getElementById（“message”）.innerHTML=“你是怎么找到我的！？！”；
clicknum++；
}
}

建议：

• 在样式选择器

  #shield

  上，添加

  z-index

  属性，使其位于前面 屏蔽元件
  • 这就是阻止红色按钮元素的诀窍

观察：

• 我添加了一个属性，你可以看到背景上的红色按钮
  • 但是您可以删除属性

    不透明度：0.26以满足您的需要

• 我简化了代码的一些段落，主要是在函数

  randomLocation（）

  • 因为有太多不必要的代码，所以只能这样做
• 增加了重置按钮，方便重复测试

---

根据您的代码，查看此实时示例：

var clicknum=0；
var btn=document.getElementById（'button'）；
var msg=document.getElementById（“消息”）；
var shield=document.getElementById（“shield”）；
函数randomLocation（）{
var randomTop=Math.floor（Math.random（）*document.body.clientHeight）+'px'；
var randomlevent=Math.floor（Math.random（）*document.body.clientWidth）+px'；
btn.style.top=shield.style.top=randomTop；
btn.style.left=shield.style.left=randomLeft；
}
函数按钮msg（）{
如果（clicknum==0）{
msg.innerHTML=“嘿，住手！”；
clicknum++；
随机定位（）；
}否则如果（单击数量===1）{
msg.innerHTML=“我说了停！”；
clicknum++；
随机定位（）；
}否则如果（单击num==2）{
msg.innerHTML=“哈！现在你找不到我了！”；
msg.style.left=“10%”；
shield.style.visibility=“可见”；
clicknum++
}否则如果（单击num==3）{
shield.style.visibility=“hidden”；
msg.innerHTML=“你是怎么得到我的！？！”；
clicknum++；
}
}
函数重置（）{
clicknum=0；
msg.innerHTML=“”；
shield.style.visibility=“hidden”；
btn.style.top=“50%”；
btn.style.left=“50%”；
msg.style.left=“26%”；
}

#按钮{
高度：200px；
宽度：200px；
背景色：红色；
位置：绝对位置；
最高：50%；
左：50%；
边界半径：50%；
}
#按钮：激活{
变换：比例（0.9,0.9）；
}
#信息{
位置：相对位置；
最高：50%；
左：30%；
}
#护盾{
高度：200px；
宽度：200px；
背景颜色：蓝色；
可见性：隐藏；
位置：绝对位置；
最高：50%；
左：50%；
/*添加z索引以将元素置于最前面*/
z指数：9999；
/*不透明度层以查看红色按钮*/
不透明度：0.26；
}

重置

如果发生以下情况，则应改为切换else@Bestlogo56，看看我的回答是否对你有帮助。。。