javascript - 代码编辑器响应窗口

Question

我在一个在线代码编辑器网站上工作。用户可以加载一个页面，他们可以在其中键入 HTML 代码，然后在代表编译网页的小框架中显示(作为 Web 格式)。

呈现 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;
}

将代码从编辑器传输到 responseWindow 的 Javascript 如下所示:

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，这不被认为是“定位的”。