为什么我的div在移动时不会留在我的另一个div？

Question

我试图让蓝色的“盾牌”div在3次点击后覆盖红色“按钮”div，但它没有正确覆盖它...它要么向左到右边等等我不要知道如何解决它。我已经尝试过调整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>

Answer 1

建议：

• 在样式选择器上 #shield 添加 z-index 属性以显示在前面 屏蔽元素
  • 这是阻止红色按钮元素的窍门

观察：

• 我为您添加了透明度，背景上显示红色按钮
  • 但是您可以删除属性 opacity: 0.26; 以满足您的需要
• 我简化了代码的某些段落，主要是 randomLocation() 的功能
  • 因为有太多不必要的代码只能执行此操作
• 添加了重置按钮以进行简单的重复测试

---

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

var clicknum = 0;
var btn = document.getElementById('button');
var msg = document.getElementById("message");
var shield = document.getElementById("shield");

function randomLocation() {
    var randomTop = Math.floor(Math.random() * document.body.clientHeight) + 'px';
    var randomLeft = Math.floor(Math.random() * document.body.clientWidth) + 'px';
    btn.style.top = shield.style.top = randomTop;
    btn.style.left = shield.style.left = randomLeft;
}

function buttonMsg() {
  if (clicknum === 0) {
    msg.innerHTML = "Hey stop it!";
    clicknum++;
    randomLocation();
  } else if (clicknum === 1) {
    msg.innerHTML = "I said stop!";
    clicknum++;
    randomLocation();
  } else if (clicknum === 2) {
    msg.innerHTML = "Ha! Now you can't get me!";
    msg.style.left = "10%";
    shield.style.visibility = "visible";
    clicknum++
  } else if (clicknum === 3) {
    shield.style.visibility = "hidden";
    msg.innerHTML = "How did you get me!?!";
    clicknum++;
  }
}

function reset() {
  clicknum = 0;
  msg.innerHTML = "";
  shield.style.visibility = "hidden";
  btn.style.top = "50%";
  btn.style.left = "50%";
  msg.style.left = "26%";
}

#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: 30%;
}

#shield {
  height: 200px;
  width: 200px;
  background-color: blue;
  visibility: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  /*add z-index to bring to front the element*/
  z-index: 9999;
  /*opacity layer to see the red button*/
  opacity: 0.26;
}

<div id="shield"></div>
<div id="button" onclick="buttonMsg();">
  <div id="message"></div>
</div>

<button type="button" onclick="reset();">Reset</button>