如何将固定模态的关闭按钮放置在固定位置?

Question

我创建了一个带有固定位置元素的模态窗口，这些元素具有可编辑的元素。我想将模式窗口的关闭按钮固定在模式窗口的右上角。

.modal-container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden scroll;
background: #ffa01f;
}
.close_modal {
position: absolute;
top: 0;
right: 0;
}
.outer {
position: relative;
width: 200px;
padding: 0 10px;
display: flex;
align-items: center;
justify-content: center;
margin: auto;
}
.inner {
width: 200px;
min-height: 100px;
padding: 50px 0;
margin: 0 auto;
}
.textarea {
width: 200px;
min-height: 100px;
background: palegreen;
white-space: pre-wrap;
}

<div class="modal-container">
<div class="close_modal">
<button type="button">x</button>
</div>
<div class="outer">
<div class="inner">
<div class="textarea" contenteditable></div>
</div>
</div>
</div>

在上面的代码中，关闭按钮不是固定的，因为它处于绝对位置：

.modal-container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden scroll;
background: #ffa01f;
}
.close_modal {
position: absolute;
top: 0;
right: 0;
}
.outer {
position: relative;
width: 200px;
padding: 0 10px;
display: flex;
align-items: center;
justify-content: center;
margin: auto;
}
.inner {
width: 200px;
min-height: 100px;
padding: 50px 0;
margin: 0 auto;
}
.textarea {
width: 200px;
min-height: 100px;
background: palegreen;
white-space: pre-wrap;
}

<div class="modal-container">
<div class="close_modal">
<button type="button">x</button>
</div>
<div class="outer">
<div class="inner">
<div class="textarea" contenteditable>texttexttexttexttext texttexttexttexttext texttexttexttexttext texttexttexttexttext texttexttexttexttext texttexttexttexttext texttexttexttexttext texttexttexttexttexttexttexttexttexttext texttexttexttexttext texttexttexttexttext texttexttexttexttext
texttexttexttexttext texttexttexttexttext texttexttexttexttext texttexttexttexttexttexttexttexttexttext texttexttexttexttext texttexttexttexttext texttexttexttexttext texttexttexttexttext texttexttexttexttext texttexttexttexttext texttexttexttexttexttexttexttexttexttext
texttexttexttexttext texttexttexttexttext texttexttexttexttext texttexttexttexttext texttexttexttexttext texttexttexttexttext texttexttexttexttexttexttexttexttexttext texttexttexttexttext texttexttexttexttext texttexttexttexttext texttexttexttexttext
texttexttexttexttext texttexttexttexttext texttexttexttexttext
</div>
</div>
</div>
</div>

但是，在固定位置，滚动条和"关闭"按钮重叠。我可以在不更改文档的情况下使用样式表解决此问题吗？

我不想设置几个 px 的固定间隔，因为滚动条的宽度不是固定的。

Answer 1

你可以把它从右边和顶部移一点。

.close_modal {
position: absolute;
top: 10px;
right: 10px;
}