如何阻止覆盖PDF iframe的SVG随页面缩放移位？

你的问题核心是绝对定位用了固定像素值，导致窗口缩放时按钮移位，同时部分尺寸设置不合理引发缩放异常。可以通过以下调整让SVG按钮始终固定在右上角：

修改要点 #

• 把.icon-container的left: 1430px改成right: 18px，固定在右上角，不受窗口宽度变化影响
• 用flex布局的对齐属性替代百分比margin，保证内部图标始终居中
• 配合SVG的viewBox属性，确保缩放时图标比例不失真

修改后的代码 #

CSS #

.div-icon {
  /* 用flex居中替代百分比margin，确保图标始终在容器中间 */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  width: 36px;
}

.icon {
  filter: invert(1);
  /* 用相对尺寸配合viewBox，保证缩放时比例不变 */
  max-width: 20px;
  max-height: 20px;
  width: 100%;
  height: auto;
}

.icon-container {
  height: 40px;
  width: 150px;
  display: flex;
  z-index: 1;
  position: absolute;
  top: 18px;
  /* 替换固定left为right，固定在右上角 */
  right: 18px;
  background-color: rgb(50 54 57);
  /* 内部元素均匀分布 */
  justify-content: space-around;
  align-items: center;
}

HTML #

<!doctype html>
<html>
<body>
  <link rel="stylesheet" href="../css/test.css">
  <div class="container">
    <div class="icon-container">
      <div class="div-icon">
        <svg viewBox="0 0 22 22" class="icon"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"></path></svg>
      </div>
      <div class="div-icon">
        <svg viewBox="0 0 22 22" class="icon"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"></path></svg>
      </div>
      <div class="div-icon">
        <svg viewBox="0 0 22 22" class="icon"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></svg>
      </div>
    </div>
    <iframe style="position: absolute; height:100%; width:100%" src="/pdf/Doku.pdf"></iframe>
  </div>
</body>
</html>

额外说明 #

• right: 18px让容器始终距离窗口右侧18px，和top:18px配合牢牢固定在右上角，不管窗口怎么缩放都不会移位
• SVG的viewBox属性已经定义了图标原始比例，配合width:100%和height:auto可以保证缩放时图标不会变形
• .icon-container用justify-content: space-around让三个图标自动均匀分布，替代原来的margin-left，避免窗口缩小时图标挤在一起

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