点击卡片创建屏幕覆盖元素，屏幕缩放后布局异常求助

核心问题修正 #

你当前使用的position: sticky是错误的，这个属性用于元素滚动到特定位置时固定，不适合做全屏居中的弹窗。改为position: fixed，让弹窗始终基于浏览器视口定位，才能保证缩放屏幕时居中效果稳定。

完整修正代码 #

/* 遮罩层：覆盖整个视口，营造弹窗背景 */
.overlay-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 8;
}

/* 弹窗容器 */
.overlap {
  max-width: 90vw; /* 响应式最大宽度，适配小屏幕 */
  width: 1000px; /* 桌面端最大宽度 */
  max-height: 90vh; /* 限制弹窗高度，防止内容溢出视口 */
  overflow-y: auto; /* 内容过多时显示滚动条 */
  background-color: #4f00e7;
  position: fixed; /* 改为fixed */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9;
  padding: clamp(15px, 3vw, 30px); /* 响应式内边距，适配不同屏幕 */
  border-radius: 10px;
}

额外说明 #

• 添加遮罩层.overlay-backdrop：确保弹窗完全覆盖页面其他元素，同时营造模态弹窗的视觉效果
• 使用max-width: 90vw：让弹窗在小屏幕上自动缩小，避免超出视口
• 加入max-height和overflow-y: auto：防止弹窗内容过多时超出屏幕，保证可滚动查看
• 用clamp()设置padding：实现内边距在小屏幕自动缩小，大屏幕保持合适尺寸

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