视口空间不足时实现元素重叠：让红色方块始终完全可见

嘿，这个需求可以通过调整定位和容器属性轻松解决，核心是让红色方块脱离常规布局流，固定在视口右侧并覆盖蓝色方块。下面是具体实现步骤和代码：

关键修改思路 #

• 让红色方块脱离文档流：使用position: absolute让它不再占用flex容器的布局空间，这样就不会被蓝色方块挤到视口外。
• 固定红色方块位置：设置right: 0，确保它始终紧贴视口右侧，无论视口怎么缩小都能完全显示。
• 建立定位参考：给父容器.container添加position: relative，让红色方块的绝对定位基于容器（视口范围内的容器）计算，避免位置错乱。
• 提升层级保证覆盖：给红色方块设置z-index: 1，确保它能显示在蓝色方块的上方（蓝色方块默认层级为0）。

修改后的完整代码 #

.container { 
  display: flex;
  position: relative; /* 为绝对定位提供参考 */
  overflow-x: auto; /* 可选：蓝色方块超出时显示横向滚动条，方便查看完整内容 */
}
div { height: 80px; }
.should-be-overlapped { 
  width: 100%; 
  min-width: 800px; 
  background: blue; 
}
.always-full-width { 
  width: 400px; 
  background: red;
  position: absolute; /* 脱离flex布局流 */
  right: 0; /* 固定在视口右侧 */
  z-index: 1; /* 确保覆盖蓝色方块 */
}

<div class="container">
  <div class="should-be-overlapped"></div>
  <div class="always-full-width"></div>
</div>

效果说明 #

这样调整后，无论视口宽度如何变化，红色的400px方块都会保持完全可见，牢牢贴在视口右侧并覆盖在蓝色方块上方。如果需要查看蓝色方块的完整内容，overflow-x: auto会让容器出现横向滚动条，这一步可以根据实际需求选择是否保留。

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