我正在制作自己的自定义代码编辑器。我首先通过tutorialrepulblic：https://www.tutorialrepublic.com/codelab.php?topic=faq&file=jquery-inject-html-into-an-iframe-from-the-textaRea对此进行建模，我没有更改从文本区域获取文本并将其插入Iframe的JS，我只是添加了CSS，它就坏了。我已经删除了CSS，它工作，但当我添加它回来，它打破。有人能帮忙吗？我将在下面包含一个代码片段，以便您可以看到：
null
function updateIframe() {
var myFrame = $("#myframe").contents().find('body');
var textareaValue = $("textarea").val();
myFrame.html(textareaValue);
}body {
overflow: hidden;
}
.editor {
resize: none;
position: absolute;
top: 50px;
left: 0px;
width: 44%;
border: none;
background-color: #282c34;
height: 100%;
color: #fff;
font-size: 15px;
padding-left: 10px;
padding-right: 15px;
padding-top: 10px;
}
.run {
position: absolute;
top: 0px;
left: 0px;
height: 50px;
width: 150px;
background-color: #04aa6d;
border: none;
color: #fff;
font-size: 16px;
cursor: pointer;
}
.run:hover {
background-color: #fff;
color: #616161;
}
.header {
position: absolute;
top: 0px;
left: 0px;
height: 50px;
width: 100%;
background-color: #616161;
}
.result {
position: absolute;
right: 0px;
top: 0px;
width: 55%;
height: 100%;
border: none;
border-left: 15px solid #282c34;
}<!DOCTYPE html>
<html>
<head>
<title>Code Editor</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<iframe class="result" id="myframe"> RESULT HERE </iframe>
<textarea id="textarea" class="editor">
</textarea>
<div class="header">
<button class="run" onclick="updateIframe()">Run ⇛</button>
</div>
</body>
</html>null
我并不擅长jQuery，但我想我可以理解将文本插入Iframe代码是如何工作的，但我就是不理解添加CSS是如何破坏它的。谢谢！
内容正在添加到iframe正文中，但隐藏在header div update the result css下面
.result {
position: absolute;
right: 0px;
top: 500px;
width: 55%;
height: 100%;
border: none;
color: black;
border-left: 15px solid #282c34;
}
