如何让绝对定位复选框不遮挡滚动文本且保持固定位置？

我有一个可滚动的文本框，设置了max-height和overflow: auto，已经将复选框绝对定位在文本框右下角，显示正常：

我需要实现：

• 文本自动绕开复选框，不被遮挡
• 滚动文本时复选框固定不动，且始终处于文本框范围内

尝试过flex和grid布局，要么复选框会随文本滚动，要么会占用文本框外的额外空间，都不符合需求。之前有个类似问题（文本不可滚动）用隐形间隔元素解决，但这里文本可滚动，滚动位置不同时间隔元素的位置无法固定，不适用当前场景。

当前文本被复选框遮挡的代码如下：

当前代码 #

CSS #

.text {
  white-space: pre-wrap;
  max-height: 8em;
  overflow-y: auto;
}

.read {
  display: inline;
  padding: 8px;
  position: absolute;
  bottom: -2px;
  right: 36px;
  background: white;
  border: 1px solid black;
}

.wrapper {
  position: relative;
}

HTML #

<div class="wrapper">
  <div class="text">
    Hello World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World Hello World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World Hello WorldHello WorldHello WorldHello WorldHello World Hello World Hello
    World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World Hello World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World HelloWorldHello WorldHello WorldHello WorldHello World Hello World Hello
    World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World Hello World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World HelloWorldHello WorldHello WorldHello WorldHello World Hello World Hello
    World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World Hello World HelloWorldHello WorldHello WorldHello WorldHello World Hello World Hello
    World
  </div>
  <div class="read" id="read">
    <input type="checkbox">
    <label for="read">Read</label>
  </div>
</div>

通过给文本容器添加底部内边距预留复选框空间，同时调整复选框的定位位置，就能实现文本绕开且复选框固定的效果：

调整后的代码 #

CSS #

.text {
  white-space: pre-wrap;
  max-height: 8em;
  overflow-y: auto;
  /* 底部内边距，刚好容纳复选框高度 */
  padding-bottom: 3em;
  box-sizing: border-box;
}

.read {
  display: inline-flex;
  align-items: center;
  padding: 8px;
  position: absolute;
  /* 定位到文本框的内边距区域 */
  bottom: 8px;
  right: 8px;
  background: white;
  border: 1px solid black;
}

.wrapper {
  position: relative;
  /* 容器最大高度包含文本框高度+底部内边距 */
  max-height: calc(8em + 3em);
}

HTML #

<div class="wrapper">
  <div class="text">
    Hello World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World Hello World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World Hello WorldHello WorldHello WorldHello WorldHello World Hello World Hello
    World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World Hello World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World HelloWorldHello WorldHello WorldHello WorldHello World Hello World Hello
    World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World Hello World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World HelloWorldHello WorldHello WorldHello WorldHello World Hello World Hello
    World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World Hello World HelloWorldHello WorldHello WorldHello WorldHello World Hello World Hello
    World
  </div>
  <div class="read">
    <input type="checkbox" id="read">
    <label for="read">已读</label>
  </div>
</div>

关键说明 #

1. 文本容器内边距：给.text添加padding-bottom，让文本内容不会填充到容器最底部，自动绕开预留的复选框区域
2. 复选框定位：调整.read的bottom和right值，让它落在文本框的内边距范围内，而非覆盖文本内容
3. 容器高度控制：.wrapper用calc计算最大高度，确保整个容器高度包含文本框的最大高度和底部内边距，避免超出预期布局
4. 交互修正：给复选框添加id，让label的for属性能正确关联，保证点击标签可触发复选框

内容的提问来源于stack exchange，提问作者Philipp