如何实现仅显示绝对定位div超出相对定位容器的部分？

要实现仅显示绝对定位元素超出相对容器的部分，核心是遮挡绝对元素在容器内部的区域，只让边界外的部分可见。下面提供两种可行方案：

方案一：伪元素遮挡（兼容性最优） #

这种方式通过给相对容器添加与自身大小、背景一致的伪元素，利用层级控制挡住绝对元素的内部部分，实现需求。

完整代码 #

.relative-container {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: red;
  z-index: 2;
}

/* 添加伪元素覆盖容器内部，遮挡绝对元素的对应区域 */
.relative-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red; /* 与容器背景色保持一致 */
  z-index: 1.5; /* 层级介于容器和绝对元素之间 */
}

.absolute-element {
  position: absolute;
  bottom: -10px;
  right: -10px;
  z-index: 1;
  width: 100px;
  height: 100px;
  background-color: blue;
}

<div class="relative-container">
  <div class="absolute-element"></div>
</div>

原理说明 #

• 伪元素完全覆盖容器内部，背景色与容器一致，视觉上和容器融为一体，不会破坏原有布局。
• 通过z-index层级控制：容器层级最高，伪元素次之，绝对元素层级最低。伪元素会挡住绝对元素位于容器内部的部分，而超出容器的部分不受遮挡，自然显示。

方案二：CSS Clip-path裁剪（现代浏览器适用） #

如果不需要兼容旧版浏览器，可以直接用clip-path裁剪绝对元素，仅保留超出容器的区域。

代码示例 #

.relative-container {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: red;
}

.absolute-element {
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 100px;
  height: 100px;
  background-color: blue;
  /* 裁剪掉容器内部的区域，只保留超出右下角的部分 */
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 90%, 90% 90%, 90% 0);
}

说明 #

clip-path定义的多边形区域会排除绝对元素在容器内部的部分（对应示例中容器90%尺寸的区域），仅保留超出容器右下角的部分。需要根据容器和绝对元素的实际尺寸调整多边形坐标。

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