当我随机化它们的位置时（在加载和使用 setInterval 时），带有图像的 div 总是位于带有文本的 div 的顶部。 JavaScript

Question

当我随机化一些带有文本的 div 和一些带有图像的 div 的位置时（加载时并使用 setInterval），图像总是位于带有文本的 div 的顶部。我一直在尝试自己寻找解决方案，但几周前我才开始学习如何编码，我什至不知道我在寻找什么。所以如果有人能帮助我，我将不胜感激。到目前为止，这是我的代码：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
        <title></title>
        <style>
            div{
                position: absolute;
            }
            .description{
                width: 650px;
            }
        </style>
        <script type="text/javascript">
            function Init(){
                divs = document.querySelectorAll("div");
                setInterval (mover, 500);
            }

            function mover(){
                divs.forEach(div => {
                    var spaceH =window.innerHeight - div.clientHeight;
                    var spaceW =window.innerWidth - div.clientWidth;
                    div.style.top=Math.round(Math.random()* spaceH) + "px";
                    div.style.left=Math.round(Math.random()* spaceW) + "px";
                });
            }
        </script>
    </head>
    <body onload="Init()">
        <div class="description">
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        </div>
        <div class="description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        </div>
        <div><img src="MyImage1.jpg" class="imagenes" alt=""></div>
        <div><img src="MyImage2.jpg" class="imagenes" alt=""></div>
    </body>
</html>

我打算用更多的 div 来做。这只是一个测试。对不起，如果我没有正确解释自己。

Answer 1

如果一个 div 在另一个之后渲染，它将覆盖之前的 div。 div 包含文本还是图像并不重要。较新的 div 仍将覆盖较旧的 div。

示例：

.overlay {
  border: 1px solid gray;
  width: 80px;
  height: 80px;
  background: transparent;
  padding: 0.2rem;
  position: absolute;
  color: red;
}

<div class="overlay">
  Here is a div with text. Lots and lots.
</div>
<div class="overlay" style="left: 40px; top: 40px">
  <img src="https://picsum.photos/80" style="width: 80px; height: 80px">
</div>
<div class="overlay" style="left: 80px; top: 20px">
  Here is a div with text. Lots and lots.
</div>

当我随机化它们的位置时（在加载和使用 setInterval 时），带有图像的 div 总是位于带有文本的 div 的顶部。 JavaScript

divs with images always get on the top of divs with text when I randomize their position (on load and using setInterval). JavaScript

html

javascript

css

random

setinterval