能否将图片置于窗口边缘外不影响滚动条，仅大宽屏可见？

问题核心 #

你之前使用硬编码绝对定位的写法，会让脱离文档流的咖啡杯元素超出正常文档的渲染宽度，浏览器会自动把溢出的元素纳入文档总宽度计算，自然就生成了多余的横向滚动条，让小屏用户可以滑到侧边的咖啡杯。
要实现「图片放在窗口侧边、超出时不撑出滚动条、仅宽屏可见」的效果，只需要三步调整：

• 第一步：从根源限制横向溢出的滚动条生成
  给页面根节点设置横向溢出裁剪，阻止所有超出视口横向范围的元素撑大文档宽度：

html,
body {
  overflow-x: hidden;
}

这个设置会直接把落在可视区横向范围外的元素裁剪掉，不会把这些溢出元素的宽度算进页面总宽度，从根源上消除多余的横向滚动条。

• 第二步：基于核心容器调整咖啡杯的定位逻辑
  不要直接硬编码left:1400px的绝对坐标——这种写法是相对于页面最左侧的固定坐标，当视口尺寸变化时，和居中的1200px宽map很容易出现位置错位，要么隔太远要么挡到map内容。你可以把咖啡杯的定位参照绑定到map所在的容器上，保证位置永远对齐：
  1. 给存放map.png的容器加上相对定位，作为咖啡杯的定位参照
  2. 把咖啡杯的位置设置在map容器的外侧，位置随容器自动调整
     示例样式：

/* 存放1200px宽map的容器，默认水平居中 */
.map-wrapper {
  position: relative;
  width: 1200px;
  margin: 0 auto;
}
/* 侧边咖啡杯图片样式 */
.coffee-cup {
  position: absolute;
  /* 距离map右边缘向外偏移30px，按需调整实际位置 */
  left: calc(100% + 30px);
  /* 按实际视觉需求调整纵向位置 */
  top: 150px;
  /* 层级匹配需求：木质背景z-index设为0，咖啡杯z-index为1，刚好处在背景层上方 */
  z-index: 1;
}

• 第三步：天然实现「仅宽屏可见」的效果
  搭配前面的overflow-x: hidden设置，不需要额外写复杂的媒体查询就能达到你要的显示逻辑：
  • 当视口宽度足够（超宽屏）：咖啡杯完全落在可视区范围内，正常显示，和map保持固定的侧边间距
  • 当视口宽度不足（普通小屏）：咖啡杯自然落在可视区横向范围外，被根节点的裁剪规则隐藏，用户既看不到它，也不会因为它的存在触发横向滚动

注意不要把overflow-x: hidden加在map-wrapper这类中间容器上，不然会直接把外侧的咖啡杯裁剪掉，导致宽屏下也看不到图片。这个裁剪规则只需要加在html和body根节点上即可。

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