Javascript 我试图在文本区域的顶部重叠一个预标记，但它'；只是漂浮在容器的中间

我花了一些时间试图在文本区域的顶部重叠一个预标记，我正在尝试构建某种文本编辑器。然而，不知何故，预标签没有呈现在其容器的左上角，它正被呈现在中间。没有边距或填充物将其拉下来，所以我没有想法。还有另一件奇怪的事情，textarea有位置：绝对，但它的容器仍在向textarea的高度伸展

出于失望，我从这个库复制了确切的代码：。但它仍然不起作用，即使它是完全相同的代码

我的当前代码：

const codeditor=document.getElementById（“code-editor\uuuu textarea”）；
const codeRenderer=document.getElementById（“代码编辑器”pre）；
codeditor.addEventListener（“keyup”，e=>{
coderender.innerHTML=codeEditor.value；
});
*，
：之后，
：之前{
框大小：继承；
}
身体{
字体系列：monospace；
线高：1.5；
保证金：0；
}
.代码编辑器{
利润率：1.67em0；
最大高度：400px；
溢出：自动；
}
.code-editor\u容器{
背景色：#fafafa；
框大小：边框框；
字体大小：12px；
字体变体连字：常用连字；
位置：相对位置；
文本对齐：左对齐；
空白：预包装；
断字：保留一切；
}
#代码编辑器文本区域，
#代码编辑器{
-webkit字体平滑：抗锯齿；
显示：继承；
字体家族：继承；
字体大小：继承；
字体风格：继承；
字体变体连字：继承；
字体大小：继承；
字母间距：继承；
行高：继承；
填充：10px；
选项卡大小：继承；
文本缩进：继承；
文本呈现：继承；
文本转换：继承；
空白：继承；
断字：继承；
}
#代码编辑器文本区{
-webkit文本填充颜色：透明；
背景：无；
边界：无；
颜色：继承；
身高：100%；
左：0；
大纲：0；
溢出：隐藏；
位置：绝对位置；
调整大小：无；
排名：0；
宽度：100%；
}
#代码编辑器{
保证金：0；
指针事件：无；
位置：相对位置；
}

代码编辑器


只需将以下字段添加到您的#代码编辑器"预id中即可

  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  padding: 10px;


const codeditor=document.getElementById（“code-editor\uuuu textarea”）；
const codeRenderer=document.getElementById（“代码编辑器”pre）；
codeditor.addEventListener（“keyup”，e=>{
coderender.innerHTML=codeEditor.value；
});
*，
：之后，
：之前{
框大小：继承；
}
身体{
字体系列：monospace；
线高：1.5；
保证金：0；
}
.代码编辑器{
利润率：1.67em0；
最大高度：400px；
溢出：自动；
}
.code-editor\u容器{
背景色：#fafafa；
框大小：边框框；
字体大小：12px；
字体变体连字：常用连字；
位置：相对位置；
文本对齐：左对齐；
空白：预包装；
断字：保留一切；
}
#代码编辑器文本区域，
#代码编辑器{
-webkit字体平滑：抗锯齿；
显示：继承；
字体家族：继承；
字体大小：继承；
字体风格：继承；
字体变体连字：继承；
字体大小：继承；
字母间距：继承；
行高：继承；
填充：10px；
选项卡大小：继承；
文本缩进：继承；
文本呈现：继承；
文本转换：继承；
空白：继承；
断字：继承；
}
#代码编辑器文本区{
-webkit文本填充颜色：透明；
背景：无；
边界：无；
颜色：继承；
身高：100%；
左：0；
大纲：0；
溢出：隐藏；
位置：绝对位置；
调整大小：无；
排名：0；
宽度：100%；
}
#代码编辑器{
保证金：0；
指针事件：无；
位置：绝对位置；
顶部：0px；
右：0px；
左：0px；
底部：0px；
填充：10px；
}

代码编辑器


空白：预包装导致此问题

您已经使用绝对定位将textarea从流中移除，但是行在它仍然存在之前和之后都会断开，并且因为您强制容器遵守它们，所以它们会相应地向下推动pre元素

（删除它也会使您的文本区域的高度变小，因为它设置为容器的100%高度。但我想这是您想要的效果吗？
嘿，感谢您的快速回复，不幸的是，这没有起到作用。如果粘贴10行CSS代码片段，您将看到文本没有重叠。我以前试过，但没有成功。我发现很奇怪，当我使用它时，我链接的完全相同的代码表现出不同的行为导致此问题。您已使用绝对定位将textarea从流中移除，但行在它仍然存在之前和之后都会断开，因为您强制容器遵守它们，所以它们会相应地向下推pre元素。@04FS我可以给您一个吻吗？告诉我你想把它放在哪里。似乎如果我把所有的东西都放在一行，它就行了。非常感谢你！你介意写个答案让我接受吗？