如何让绝对定位元素超出屏幕且不触发水平滚动（禁用overflow-x:hidden）

你的圆形装饰元素因绝对定位超出视口右侧导致出现水平滚动条，且不想使用overflow-x: hidden属性，可尝试以下几种解决方案：

方法1：用transform: translateX()替代right偏移 #

transform属于视觉层面的偏移，不会改变元素的布局占位，因此不会触发水平滚动条。将原right: -96px替换为基于自身宽度的百分比偏移（96px是元素宽度185px的约51.89%）：

.circle {
    width: 185px;
    height: 185px;
    position: absolute;
    top: 1430px;
    right: 0; /* 让元素右边缘对齐视口右侧 */
    transform: translateX(51.89%); /* 向右偏移自身宽度的51.89%，实现一半超出视口 */
}

方法2：嵌套在带overflow: hidden的相对定位容器内 #

给圆形元素套一个占满视口宽度的相对定位容器，仅让容器隐藏内部溢出部分，不影响全局页面的overflow设置：

修改后的HTML #

<body>
  <div class="circle-wrapper">
    <div class="circle">
      <img src="noun-dashed-circle-orange.svg" alt="橙色虚线圆形装饰">
    </div>
  </div>
</body>

修改后的CSS #

.circle-wrapper {
    position: relative;
    overflow: hidden;
    width: 100vw;
    min-height: 100vh; /* 确保容器高度覆盖元素所在位置 */
}
.circle {
    width: 185px;
    height: 185px;
    position: absolute;
    top: 1430px;
    right: -96px;
}

方法3：用clip-path裁剪超出部分 #

通过clip-path属性直接裁剪掉元素超出视口右侧的部分，超出区域不会被渲染，自然不会触发滚动条：

.circle {
    width: 185px;
    height: 185px;
    position: absolute;
    top: 1430px;
    right: -96px;
    clip-path: inset(0 96px 0 0); /* 裁剪右侧96px的区域 */
}

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