Позиционирование элемента не работает с Javascript [закрыто] ⇐ CSS

[Anonymous]

Я пытаюсь создать игру для набора текста (следуя руководству), но мой код работает не так, как у них. Когда позиция в CSS является абсолютной, курсор остается в правильном положении, когда я изменяю размер окна, но исчезает, когда я печатаю. Когда положение фиксировано, оно не выравнивается по тексту правильно, когда я изменяю размер окна, но перемещается так, как я хочу, когда я печатаю. я перепробовал множество комбинаций и решений, но не знаю, как это исправить.

Код: Выделить всё

/* CSS for cursor

#cursor{
display: none;
width: 2px;
height: 1.6rem;
position: absolute;
top: 5%;
left: 1%;
background: #EE0000;
animation: blink 1s infinite;
}

Код: Выделить всё

//javascript for moving cursor

const nextLetter = document.querySelector(selectors = '.letter.current');
const cursor = document.getElementById(elementId = 'cursor');
if (nextLetter) {
cursor.style.top = nextLetter.getBoundingClientRect().top + 2 + 'px';
cursor.style.left = nextLetter.getBoundingClientRect().left + 'px';
}
})

чтобы курсор оставался на одном уровне с текстовым элементом при изменении размера и работал с кодом перемещения курсора JavaScript

Подробнее здесь: https://stackoverflow.com/questions/787 ... javascript