Google Sites中iframe内CSS overlay如何实现整页覆盖

你卡了两天不是漏写了什么CSS配置，是踩了浏览器同源安全策略的硬限制：Google Sites嵌入自定义代码用的iframe是完全独立的渲染上下文，iframe内部的所有元素——哪怕你把position: fixed、z-index拉到最高——最多只能铺满iframe自身的区域，绝对不可能突破iframe边界覆盖外层的Google Sites页面。这是浏览器强制的安全规则，专门用来防止嵌入的恶意页面篡改外层站点内容，靠调整position、overflow这类CSS属性根本绕不开，之前的调试方向从根上就错了。

方案1：用Google Sites原生导航实现（最推荐，零适配成本） #

直接放弃iframe嵌入自定义代码的方式，用Google Sites编辑器自带的导航组件：原生导航本身就支持下拉/弹出菜单效果，你可以直接把三个州分类和下属城市链接配进去，还能自定义按钮样式改成你写的橙色圆角效果，完全没有跨容器的显示问题，全屏遮罩、下滑弹出的动效都能正常实现，不需要写一行兼容代码。

方案2：必须保留自定义代码的适配方法 #

如果一定要用自己写的这段按钮逻辑，必须同时改iframe配置和代码，缺一步都实现不了全屏覆盖：

• 第一步：改嵌入iframe的参数
  在Google Sites插入自定义代码时，不要给iframe设固定宽高，把iframe设置为固定定位铺满整个浏览器视口，z-index调到站点最高层级，背景设为透明，默认不拦截底层页面的点击操作。如果Google Sites的自定义嵌入模块不允许修改iframe的定位、z-index属性，这个方案就无法生效，只能选方案1。
• 第二步：修正原有代码的问题
  你原来的代码里有几个小错误，同时要加透明适配逻辑：
  • 修正.container的样式笔误：padding top: 30px是无效写法，改成padding-top: 30px;
  • 给html、body标签清除默认边距，设置宽高100%、背景透明，避免iframe默认白底挡住底层页面
  • 加互斥逻辑：打开一个分类菜单的时候自动关闭其他已经打开的菜单，避免多层遮罩叠在一起
  • 把overflow-x: auto; overflow: scroll;改成overflow-x: hidden，避免菜单没打开的时候出现滚动条

把你原来嵌入的代码替换成下面的版本，再配合上面的iframe全屏配置就能实现想要的幕布效果：

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    html, body {
      width: 100%;
      min-height: 100vh;
      background: transparent;
      font-family: 'Lato', sans-serif;
    }
    
    .container {
      display: flex;
      flex-flow: row nowrap;
      gap: 10px;
      justify-content: center;
      width: 100%;
      padding-top: 30px;
      position: relative;
      z-index: 10;
    }
    
    .overlay {
      height: 0%;
      width: 100%;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.9);
      overflow-x: hidden;
      transition: .5s;
    }
    
    .overlay a {
      text-decoration: none;
      font-size: 24px;
      color: #818181;
      display: block;
      transition: 0.3s;
      padding: 8px 0;
    }
    
    .overlay a:hover,
    .overlay a:focus {
      color: #f1f1f1;
    }
    
    .overlay-content {
      display: flex;
      flex-direction: column;
      position: relative;
      top: 25%;
      width: 100%;
      text-align: center;
    }
    
    .closebtnOverlay {
      position: absolute;
      top: 20px;
      right: 45px;
      font-size: 50px !important;
    }
    
    .button {
      background-color: #FF8C00;
      border: 2px solid #338C9A;
      border-radius: 12px;
      color: white;
      width: 120px;
      height: 40px;
      text-align: center;
      text-decoration: none;
      font-weight: bold;
      display: inline-block;
      font-size: 16px;
      cursor: pointer;
    }
    
    .button:hover {
      box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    }
    
    @media screen and (max-height: 450px) {
      .overlay a {
        font-size: 20px
      }
      .closebtnOverlay {
        font-size: 40px !important;
        top: 15px;
        right: 35px;
      }
    }
  </style>
</head>
<body>
<div class="container">
  <div id="myNav" class="overlay">
    <a href="javascript:void(0)" class="closebtnOverlay" onclick="closeNav()">×</a>
    <div class="overlay-content">
      <a href="javascript:void(0)">Phoenix</a>
      <a href="javascript:void(0)">Prescott</a>
      <a href="javascript:void(0)">Scottsdale</a>
      <a href="javascript:void(0)">Tucson</a>
    </div>
  </div>
  <div id="myNav2" class="overlay">
    <a href="javascript:void(0)" class="closebtnOverlay" onclick="closeNav2()">×</a>
    <div class="overlay-content">
      <a href="javascript:void(0)">Cape Coral</a>
      <a href="javascript:void(0)">Jacksonville</a>
      <a href="javascript:void(0)">Lakeland</a>
      <a href="javascript:void(0)">Miami</a>
      <a href="javascript:void(0)">Ocala</a>
      <a href="javascript:void(0)">Orlando</a>
      <a href="javascript:void(0)">Palm Beach</a>
      <a href="javascript:void(0)">Pensacola</a>
      <a href="javascript:void(0)">Port Charlotte</a>
      <a href="javascript:void(0)">Sarasota</a>
      <a href="javascript:void(0)">St. Augustine</a>
      <a href="javascript:void(0)">St. Petersburg</a>
      <a href="javascript:void(0)">Tallahasse</a>
      <a href="javascript:void(0)">Tampa</a>
    </div>
  </div>
  <div id="myNav3" class="overlay">
    <a href="javascript:void(0)" class="closebtnOverlay" onclick="closeNav3()">×</a>
    <div class="overlay-content">
      <a href="javascript:void(0)">Austin</a>
      <a href="javascript:void(0)">Dallas</a>
      <a href="javascript:void(0)">Houston</a>
      <a href="javascript:void(0)">San Antonio</a>
    </div>
  </div>
  <button class="button" onclick="openNav()">Arizona</button>
  <button class="button" onclick="openNav2()">Florida</button>
  <button class="button" onclick="openNav3()">Texas</button>
  <script>
    // 打开新菜单前先关闭所有已打开的菜单
    function closeAllNav() {
      document.getElementById("myNav").style.height = "0%";
      document.getElementById("myNav2").style.height = "0%";
      document.getElementById("myNav3").style.height = "0%";
    }
    function openNav() {
      closeAllNav()
      document.getElementById("myNav").style.height = "100%";
    }

    function closeNav() {
      document.getElementById("myNav").style.height = "0%";
    }

    function openNav2() {
      closeAllNav()
      document.getElementById("myNav2").style.height = "100%";
    }

    function closeNav2() {
      document.getElementById("myNav2").style.height = "0%";
    }

    function openNav3() {
      closeAllNav()
      document.getElementById("myNav3").style.height = "100%";
    }

    function closeNav3() {
      document.getElementById("myNav3").style.height = "0%";
    }
  </script>
</div>
</body>
</html>

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