Окно ответа редактора кода

Question

Я работаю над сайтом, который является редактором онлайн-кода. Пользователи могут загружать страницу, где они могут набирать код HTML, который затем отображается (как веб-формат) в небольшом кадре, который представляет скомпилированную веб-страницу.

Фрейм, что HTML отображается в выглядит следующим образом:

#responseWindow { 
    width: 100%; 
    height: 200px; 
    background-color: white; 
    margin-top: 30px; 
    margin-bottom: 30px; 
    overflow: auto; 
    padding-left: 8px; 
    padding-right: 8px; 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 

Javascript, который передает код из редактора в responseWindow выглядит следующим образом:

editor.getSession().on('change', function() { 
    document.getElementById('responseWindow').innerHTML = editor.getValue(); 
}); 

Обычно всё напечатал остается внутри этого фрейма, но если пользователь дает фиксированное позиционирование div, тогда текст не остается в пределах кадра и появляется где-то еще на странице. Например:

<p style="top: 100px; right: 10px;">Hello world</p> 

Затем текст Hello World находится не в кадре. Мой вопрос заключается в том, как я могу сделать некоторый тип независимого пространства для кода, который будет отображаться? Как я могу сделать рендеринг кода моих пользователей в поле/рамке, чтобы они могли просмотреть, как он выглядит?

Answer 1

#responseWindow Набора для position: relative

Позиционированных элементов по сравнению с их ближайшим расположеннымами предка. Прямо сейчас ваша позиция #responseWindow равна static, которая не считается «позиционированной».