前端布局调试：如何调整样式将邮件槽图片移至门图片右侧

现有代码问题点 #

• 布局上下文冲突：门图片使用position:absolute完全脱离正常文档流，邮件槽图片使用float:right基于正常文档流排布，二者布局逻辑不互通，无法实现对齐效果。
• 容器宽度不足：body设置了width:40%的限制，仅门图片宽度就达850px，加右侧的邮件槽宽度远超40%视口宽度，直接导致元素溢出错位。
• 硬编码数值适配性差：margin-left:1000px、left:542px均为固定像素值，不同屏幕尺寸下定位会完全偏移，同时body添加的embed-responsive类自带定位规则，会干扰绝对定位元素的位置计算。
• 冗余代码：CSS中已经声明了body的背景图，body标签上又重复添加background属性，属于无效冗余代码。

修复方案 #

统一将两个图片放在同一个相对定位的父容器中，基于父容器做绝对定位对齐，修复后的代码如下：

<!-- 修正head内的CSS规则 -->
<style>
body {
  /* 移除原40%宽度限制，铺满整个视口 */
  width: 100vw;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background-image: url("../img/background.gif");
  background-repeat: no-repeat;
  background-size: cover;
}
/* 新增图片组父容器，作为定位基准 */
.img-group {
  position: relative;
  width: fit-content;
  margin: 0 auto;
}
/* 邮件槽图片样式 */
.mail-slot {
  position: absolute;
  /* 门宽度为850px，加20px间距，可按需调整间距数值 */
  left: calc(850px + 20px);
  /* 垂直对齐位置，保留原350px数值，可按需调整 */
  top: 350px;
}
</style>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Cary McClures' Portfolio</title>
<!-- Bootstrap -->
<link href="../css/bootstrap-4.4.1.css" rel="stylesheet">
</head>
<!-- 移除body上冗余的background属性和干扰定位的embed-responsive类 -->
<body>
<div class="img-group">
  <a href="mailto:chef@carymcclure.com">
    <img 
      class="mail-slot"
      src="../img/slot.gif" 
      width="216" 
      height="89" 
      alt="email" />
  </a>
  <a href="library.html">
    <img 
      src="../img/door.gif" 
      width="850" 
      height="1049" 
      alt="door"/>
  </a>  
</div>

修复后邮件槽会始终固定在门图片的右侧，调整left属性里的间距数值即可控制两个图片的水平间距，调整top属性即可控制邮件槽的垂直对齐位置。

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