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

Posted 2023-05-07

【中文标题】如何将固定模态的关闭按钮放置在固定位置？

【英文标题】：How do I place the close button of a fixed modal in a fixed position?

【发布时间】：2020-03-30 23:37:54

【问题描述】：

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

.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的固定间隔，因为滚动条的宽度不固定。

【参考方案1】：

您可以从右侧和顶部稍微移动它。

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