Пробовал обновить текстовую область зеркала кода с помощью CSS, но это ничего не меняет. ⇐ CSS

[Гость]

Сейчас я пытаюсь создать редактор кода в браузере.

Для подсветки синтаксиса я решил использовать зеркало кода. проблема с зеркалом кода заключается в том, что когда мы используем «объект» зеркала кода, он не может правильно использовать обычный js, и весь мой код был структурирован вокруг слушателей и прочего.

Итак, я нашел обходной путь. Я хотел создать две текстовые области, одна из которых будет поверх другой. верхняя часть будет текстовой областью «зеркала кода», а другая, которая не видна, будет обычной текстовой областью.

Я хотел сделать так, чтобы, нажимая на текстовую область зеркального отображения кода, я в основном фокусировался на обычной текстовой области позади и обновлял текстовую область зеркального кода при вводе текста в приведенной ниже области.

После написания кода у меня теперь есть две текстовые области одна под другой (см. рисунок)

введите здесь описание изображения, текущее состояние

но когда я пытаюсь поместить их друг на друга, это просто не работает

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

Я попробовал использовать встроенный CSS, потому что подумал, что, возможно, что-то переопределяет CSS из зеркала кода. все равно ничего не изменилось

Я попробовал добавить правило !important в CSS, чтобы, возможно, что-то изменить. ничего не изменилось..

код:
{% расширяет 'base.html' %} {% головка блока %} .form-group-relative { положение: относительное; } .code-textarea { позиция: абсолютная; верх: 0; слева: 0; z-индекс: 1; ширина: 100%; высота: 100%; непрозрачность: 0,7; } .form-control { положение: относительное; z-индекс: 2; } {% головка концевого блока %} {% блокирует контент %} Интерпретатор Python Webide Выполнить Стоп Очистить терминал Поделиться ссылкой для приглашения const codeTextArea = document.getElementById("код"); const textArea = document.getElementById("текстовая область"); codeTextArea.addEventListener("focus", () => { textArea.focus(); });