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

Question

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

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

看起来应该是这样的。当您单击页脚中的“信息”按钮时，会出现一个弹出窗口：

框/弹出窗口的css是带有类cms-footer-info的元素是弹出框/框：

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;。它为我解决了。