Текст поверх анимированного javascript div

Question

У меня есть анимированный фон, который случайным образом отображает 0 и 1 в пастельных тонах и заполняет весь экран, и я пытаюсь наложить на него текст, но, похоже, он не работает. Может кто-нибудь помочь? Это html код

<p style="font-size:20px;z-index:-1;" class="back"></p>
<div class="main">
<p style="font-size:100px;z-index:1;">Hello!There!</p>
</div>
</div>

А это JavaScript код

var lines=10;
var lenght=100;
function getcolor()
{ var color='#';
    var letters = "BCDEF";
   for(var i=0;i<6;i++)
   {color+= letters[Math.floor(Math.random() * 5)];}
    return color;}
function genstring()
{var letters="01010101010101"
 var string="<p>"
 for(var i=0;i<2000;i++)
 {for(var j=0;j<Math.floor(Math.random()*10);j++)
  {
    string+=letters[Math.floor(Math.random()*2)];
  }
  string+=" "
 }
 string+="</p>"
return string;
}
function changer()
{var x=genstring()
var y=document.querySelector(".back")
var color=getcolor()
y.innerHTML=x
y.style.color=color}
setInterval("changer()",1300)

Полный код находится на repl: https://repl.it/@Ajkallivayalil / about # script . js В настоящее время вывод выглядит так: https://about--ajkallivayalil.repl.co/. Заранее благодарю за помощь ^^

Answer 1

Ваш текст («Hello! There!») Существует, он находится прямо под полем экрана (потому что он находится в другом блоке <div>, который размещается через движок под первым <div> в соответствии с порядком по умолчанию <div> на веб-странице). Вы можете проверить свой div.main элемент с помощью Chrome инструментов разработчика или изменить масштаб страницы, чтобы увидеть, где он находится.

Что вы можете с этим сделать:

1. Добавить атрибуты * От 1010 * до style из <p style="font-size:100px;z-index:1;">Hello!There!</p>

Тогда это будет выглядеть так: <p style="font-size:100px;z-index:1;position: absolute; top: 40px; left: 40px;">Hello!There!</p>

Просто поместите div.main поверх <div style="width:100%;height:100%;overflow:hidden;"> (div с 01010101010101) в HTML код