如何隐藏绝对定位圆形div的超出部分？避免页面横向滚动

绝对定位的.big-circle因右侧超出视口范围，导致页面出现横向滚动条，需隐藏超出部分且保留原有定位位置。

解决方案 #

• 移除.big-circle上无效的overflow属性（该属性仅控制元素内部内容溢出，对元素自身超出父容器的情况无作用）
• 给父容器.floating-circles添加position: relative，使.big-circle以该容器为定位参考
• 给.floating-circles设置overflow-x: hidden，裁剪超出容器右侧的部分
• 确保.floating-circles宽度占满视口，添加width: 100%（若父容器已有全屏宽度设置可省略）

修改后的代码 #

CSS代码

.floating-circles {
  position: relative;
  width: 100%;
  overflow-x: hidden;
}

.floating-circles .big-circle {
  position: absolute;
  z-index: 1;
  right: calc((-35vw / 2) + 9%);
  bottom: calc((-35vw / 2) + 14%);
  width: 35vw;
  height: 35vw;
  border-radius: 50%;
  background: rgb(146, 28, 205);
  background: linear-gradient(45deg, rgba(146, 28, 205, 1) 0%, rgba(153, 26, 177, 1) 40%, rgba(48, 35, 174, 1) 80%, rgba(48, 35, 174, 1) 100%);
}

HTML代码（无需修改）

<div class="floating-circles">
  <div class="small-circle"></div>
  <div class="big-circle"></div>
  <!-- The big-circle is the circle causing the bug -->
</div>

说明 #

• position: relative 让父容器成为子元素的定位上下文，确保overflow属性能对绝对定位的子元素生效
• overflow-x: hidden 仅裁剪横向超出的部分，不会影响纵向布局和元素原有定位位置

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