标题中的弹出菜单被推回页面内容后面答案

【问题标题】：popup menu in header gets pushed back behind page content标题中的弹出菜单被推回页面内容后面
【发布时间】：2013-04-25 17:08:16
【问题描述】：

我在标题中有一个菜单按钮。该页面由 ajax 请求填充。单击菜单按钮，它会在屏幕上出现一秒钟，然后被推回列表视图后面。我无法在任何地方找到解决方案。

<!DOCTYPE HTML>
<HTML>
  <head>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
    <script type="text/javascript" charset="utf-8" src="js/cordova-2.6.0.js"></script>
    <link rel="stylesheet" href="./style/jquery.mobile-1.3.1.min.css" />
    <script src="./js/jquery-2.0.0.min.js"></script>
    <script src="./js/jquery.mobile-1.3.1.min.js"></script>
  </head>
  <body>
    <div data-role="page" id="home">
      <div data-theme="b" data-role="header">
        <a data-inline="true" data-transition="pop" data-rel="popup" href="#popupMenu" data-icon="gear" data-iconpos="notext" class="ui-btn-right"></a>
    </div>
   <!--Menu-->
     <div data-role="popup" id="popupMenu" data-theme="d">
       <ul data-role="listview" data-inset="true" style="min-width:200px;" data-theme="d">
         <li data-icon="false"><a href="#">Share</a></li>
         <li data-icon="false"><a href="mailto:" data-inline="true" data-transition="pop">Contact</a></li>
         <li data-icon="false"><a href="#">Оцени Нас</a></li>
       </ul>
     </div>
   <!--Menu-->
<div data-role="content">
  <ul>
    //dynamically populated data here
  </u>
</div>
<script src="js/getmainnews.js"></script>
</div>
</body>
</html>

同样的事情发生在另一个页面上，弹出窗口被标题截断了一点。我不确定是否需要向您展示 JS 文件...这只是一个 ajax 调用 on('pageinit'...) 并在最后刷新列表视图。我在这里做错了什么？

【问题讨论】：

您是否尝试在菜单按钮上设置z-index。

标签： jquery css jquery-mobile popup

【解决方案1】：

尝试在菜单中添加 z-index。

 element {
   position: relative;
   z-index: 9999; 
 }

【讨论】：

不要忘记您需要定位元素（相对、固定/绝对）才能使用z-index
很抱歉，我不太了解 z-index。我现在会调查一下。我可以将其包含在 css 文件中吗？在我的 Android 模拟器中，菜单不会被推回。在我的手机上运行它会将其推回。
知道了...我只是不知道要搜索什么。这是我添加到我的 css 中的内容： .ui-popup { -webkit-transform:translateZ(0) } 它在我的手机上运行。谢谢大家！！！
感谢 user2025469。您的解决方案解决了我在 Android 浏览器上使用 jQuery Mobile 弹出窗口的问题！