设置overflow后绝对定位元素被截断的问题求助

要解决「绝对定位图标随列表滚动但不被截断」的问题，只需调整定位上下文和容器的溢出规则：

1. 将定位上下文从li转移到.action容器：让特殊图标相对于每个列表项里的操作容器定位，确保图标随列表项滚动。
2. 调整ul的水平溢出与内边距：避免图标被列表容器的溢出规则截断。

修改后的核心CSS代码 #

ul {
  max-height: 140px;
  max-width: 320px;
  overflow-y: auto;
  overflow-x: visible; /* 允许水平方向内容溢出显示 */
  padding-right: 24px; /* 给图标预留显示空间，宽度=图标宽+间距 */
}

.icon.special {
  position: absolute;
  left: 100%; /* 相对于.action容器右侧定位 */
  margin-left: 4px;
}

.action {
  position: relative; /* 设置为图标定位的上下文 */
  margin-left: auto;
}

li {
  /* 移除原有的position: relative */
}

完整代码示例 #

JavaScript

function onClick({ target }) {
  const specialEl = target.closest("li").querySelector(".special");
  const isHidden = specialEl.dataset.hidden === "true";
  specialEl.dataset.hidden = !isHidden;
}

window.onload = function() {
  document.querySelectorAll(".a").forEach((btnEl) => {
    btnEl.addEventListener("click", onClick);
  });
}

CSS

#wrapper {
  position: fixed;
  z-index: 10;
}

ul {
  max-height: 140px;
  max-width: 320px;
  overflow-y: auto;
  overflow-x: visible;
  padding-right: 24px;
}

.icon.special {
  position: absolute;
  left: 100%;
  margin-left: 4px;
}

.action {
  position: relative;
  margin-left: auto;
}

/* === 额外样式 === */

.list {
  border: 1px solid black;
}

ul {
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 8px;
  border: 1px solid gray;
}

li {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 4px 0;
  padding: 4px 0;
  background: rgba(0,0,0,0.05);
}

.icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: red;
  cursor: pointer;
}

header, footer { font-weight: bold; margin: 8px; }
footer { font-size: 10px; }

.icon.special {
  background: blue;
}

[data-hidden="true"] { display: none; }

html { font-family: sans-serif; }

HTML

<div class="wrapper">
  <div class="list">
    <header>Short list:</header>
    <ul>
      <li>
        <span>Apple</span>
        <span class="action">
          <i class="a icon"></i>
          <i class="icon special" data-hidden="true"></i>
        </span>
      </li>
      <li>
        <span>Pear</span>
        <span class="action">
          <i class="a icon"></i>
          <i class="icon special" data-hidden="true"></i>
        </span>
      </li>
    </ul>
    <header>Long list:</header>
    <ul>
      <li>
        <span>Gingerbread</span>
        <span class="action">
          <i class="a icon"></i>
          <i class="icon special" data-hidden="true"></i>
        </span>
      </li>
      <li>
        <span>Cookie</span>
        <span class="action">
          <i class="a icon"></i>
          <i class="icon special" data-hidden="true"></i>
        </span>
      </li>
      <li>
        <span>Marzipan</span>
        <span class="action">
          <i class="a icon"></i>
          <i class="icon special" data-hidden="true"></i>
        </span>
      </li>
      <li>
        <span>Cheesecake</span>
        <span class="action">
          <i class="a icon"></i>
          <i class="icon special" data-hidden="true"></i>
        </span>
      </li>
      <li>
        <span>Lollipop</span>
        <span class="action">
          <i class="a icon"></i>
          <i class="icon special" data-hidden="true"></i>
        </span>
      </li>
      <li>
        <span>Jelly</span>
        <span class="action">
          <i class="a icon"></i>
          <i class="icon special" data-hidden="true"></i>
        </span>
      </li>
      <li>
        <span>Caramel</span>
        <span class="action">
          <i class="a icon"></i>
          <i class="icon special" data-hidden="true"></i>
        </span>
      </li>
    </ul>
    <footer>
      Lorem ipsum
    </footer>
  </div>
</div>

原理说明 #

• 将定位上下文从li移到.action，确保图标始终和对应列表项的操作按钮绑定，列表滚动时会同步移动。
• 设置ul的overflow-x: visible并添加右侧内边距，给图标留出足够的显示空间，避免被容器的溢出规则截断。

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