如何将图片置于iframe上方并实现全屏显示与iframe滚动

需要实现以下效果：

• 网页中正常展示iframe
• 图片全屏覆盖在iframe上方
• iframe保持可滚动功能

当前代码无法让图片全屏显示，布局效果不符合预期。

现有代码 #

<body>
  <div id="GlobalPayments-overlay-02d30efa" style="
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    transition: all 0.3s ease-in-out 0s;
    z-index: 100;
    background: rgba(0, 0, 0, 0.7);
  ">
    <iframe style="
      display: inherit;
      z-index: 10001;
      position: absolute;
      transition: transform 0.5s ease-in-out 0s;
      transform: scale(1);
      opacity: 1;
      top: 400px;
      left: 500%;
      margin-left: 200px;
      background-color: rgb(255, 255, 255);
    " src="http://localhost:3000/d/ccbd5cd2-d8c7-482c-809e-157191a029db/new-dashboard?orgId=1&from=1685031277500&to=1685032916500&viewPanel=1" id="iframe-overlay" title="iframe">
  </iframe>

    <img style="
      transition: all 0.5s ease-in-out 0s;
      opacity: 1;
      float: left;
      position: absolute;
      top: 23% !important;
      left: 48% !important;
      transform: translate(-50%, -50%) !important;
      z-index: 99999999;
      margin-left: 192px;" id="close-overlay" "" src="image.png" />
</div>
<style>
body {
  width: 100px  ;
}
#GlobalPayments-overlay-02d30efa {
    --iframeW: 1080px; /*the defaults set by browsers https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe*/
    --iframeH: 1500px;
    }
#GlobalPayments-overlay-02d30efa iframe {
      transition: transform 0.5s ease-in-out 0s;
      transform: scale(1);
      opacity: 1;
    background-color: rgb(255, 255, 255);
    top: 40px;
    margin: 0;
    padding: 0;
    left: calc(50% - (var(--iframeW) / 2));
    position: absolute;
}

#GlobalPayments-overlay-02d30efa img {
  position: absolute;
  top: 40px;
  left: calc(50% + (var(--iframeW) / 2));
  transform: translate(50%, 50%);
  margin: 0;
  padding: 0;
  width: 16px;
  height: 16px;
}
</style>
<script>
const iframe = document.querySelector('iframe');
const img = document.querySelector('img');
  iframe.style = '';
  img.style = '';
</script>
</body>

效果说明 #

• 当前效果：图片未全屏显示，iframe位置异常，整体布局混乱
• 期望效果：图片完全覆盖整个浏览器视口，iframe在图片下方保持可滚动状态

解决方案 #

以下是修改后的代码，关键调整点：

1. 给容器添加overflow: auto，让iframe超出容器高度时可以滚动
2. 设置图片为全屏尺寸并固定定位，确保覆盖整个视口且层级在iframe之上
3. 移除内联样式和JS中清空样式的代码，避免样式冲突
4. 调整iframe的布局，使其在容器内正常居中显示

修改后完整代码 #

<body>
  <div id="GlobalPayments-overlay-02d30efa">
    <iframe 
      src="http://localhost:3000/d/ccbd5cd2-d8c7-482c-809e-157191a029db/new-dashboard?orgId=1&from=1685031277500&to=1685032916500&viewPanel=1" 
      id="iframe-overlay" 
      title="iframe"
    ></iframe>

    <img 
      id="close-overlay" 
      src="image.png" 
      alt="全屏覆盖图"
    />
  </div>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      overflow: hidden;
    }
    #GlobalPayments-overlay-02d30efa {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.7);
      overflow: auto; /* 允许容器滚动 */
      z-index: 100;
    }
    #iframe-overlay {
      display: block;
      width: 1080px;
      height: 1500px;
      margin: 40px auto;
      background-color: #fff;
      border: none;
    }
    #close-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      object-fit: cover; /* 保持图片比例并覆盖全屏 */
      z-index: 9999; /* 确保在iframe上方 */
    }
  </style>
</body>

内容的提问来源于stack exchange，提问作者Reza Fahmi Alviandy