html - CSS 固定元素出现在内容下方

Question

我有一个 Div 元素，它在单击图标时弹出。这在桌面上工作正常。但是当我在移动设备上尝试它时，它出现在内容下方而不是上方，尽管元素 z-index 设置为 5000。

它似乎只在基于 webkit 的浏览器上运行时才结束。首先，我认为这取决于页面的高度，但只有当我在设备工具栏和我测试过的所有手机中运行 chrome 时才会出现这种情况。

它应该是这样的。单击页脚中的“信息”按钮时会出现一个弹出窗口:

box/popup 的 css 是带有 cms-footer-info 类的元素是 popup/box:

position: fixed;
background-color: #444445;
color: #fff;
height: auto;
display: block;
left: 1%;
bottom: 60px;
padding: 2%;
z-index: 4000;

页脚的 HTML:

<div class="footer">
     <div class="footer-column-one">
        <i class="fa fa-globe fa-3x" aria-hidden="true"></i>
        <div class="cms-links">
           <h6>Document identity</h6>
           <div>
              <span class="cms-footer-info-0-label">something</span>
              <span class="cms-footer-info-0-value">else</span>
           </div>
        </div>
     </div>
     <div class="cms-footer-center">
        <div class="cms-footer-center-0">Some Text </div>
     </div>
     <div class="footer-column-three">
        <i class="fa fa-info-circle fa-3x" aria-hidden="true"></i>
        <div class="cms-footer-info">
           <h6>Document identity</h6>
           <div class="cms-footer-info-0">
              <span class="cms-footer-info-0-label">Publ. no. </span>
              <span class="cms-footer-info-0-value">T810181</span>
           </div>
           <div class="cms-footer-info-1">
              <span class="cms-footer-info-1-label">Label</span>
              <span class="cms-footer-info-1-value">Value </span>
           </div>
        </div>
     </div>
  </div>

弹出窗口下方的内容具有静态布局且没有 z-index:

CSS:

margin-bottom: 65px;
margin-left: auto;
margin-right: auto;
max-width: 700px;
display: block;

html:

<div class="container">
   <div>
    Alot of text. Wrapped in spans, divs and so on.
   </div>
</div>

非常感谢任何提示。谢谢!

工作示例链接:Working example

当您加载网站时。尝试按底部的信息或地球图标。它将向您显示相关的弹出窗口，现在打开开发人员控制台并在 Chrome 的开发人员控制台中选择切换设备工具栏左上角或访问手机上的 url。

Answer 1

从页脚中取出 overflow:hidden;。它为我解决了这个问题。