div с изображениями всегда попадают на верх div с текстом, когда я рандомизирую их положение (при загрузке и использовании setInterval). JavaScript - PullRequest
Новая
       12

div с изображениями всегда попадают на верх div с текстом, когда я рандомизирую их положение (при загрузке и использовании setInterval). JavaScript

0 голосов
/ 18 апреля 2020

Когда я рандомизирую положение некоторых элементов div с текстом, а других - с изображениями (при загрузке и с помощью setInterval), изображения всегда попадают на вершину элементов div с текстом. Я пытался найти решение самостоятельно, но я только начал учиться кодировать несколько недель за go, и я даже не знаю, что я ищу. Поэтому я был бы признателен, если бы кто-нибудь мог мне помочь. Пока это мой код: 

<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>

Я собираюсь сделать еще много дел. Это просто тест. И извините, если я не объясняю себя должным образом.

1 Ответ

0 голосов
/ 18 апреля 2020

Если один 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>
...