jQuery MiniUI

标题: toolbar里的mini-menu被遮挡问题 [打印本页]

作者: julianzhu1117 时间: 2014-9-26 16:42:59 标题: toolbar里的mini-menu被遮挡问题

在页面顶部放了个mini-toolbar,设置为position为fixed。里面第一排放了几个mini-menu，然后用<br>第二排又放了点mini-checkbox，发现menu点击后的菜单项都被第二排的checkbox给遮挡住了。设置了z-index也没用

作者: felt 时间: 2014-9-26 16:52:31

[attach]5227[/attach]请提供重现页面，本地测试未发现你说的问题

作者: julianzhu1117 时间: 2014-9-26 23:18:08

felt 发表于 2014-9-26 16:52
请提供重现页面，本地测试未发现你说的问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<script src="Scripts/boot.js"></script>
<style>
      #divTop
      {
         width:100%;
         height:200px;
         padding:0;
         margin:0;
         overflow-x:hidden;
         overflow-y:auto;
         position:relative;
         cursor:pointer;
         background:#ccc
      }

      #divToolbar
      {
         width:100%;
         z-index:9990;
         position:fixed;
         left:0px;
         top:0px;
      }
</style>
</head>
<body>
<div id="divTop">
<div id="divToolbar" class="mini-toolbar">
      <a class="mini-button">按钮一</a>
      <a id="btOptStatus" class="mini-menubutton " menu="#popupMenuOptStatus" >状态表</a>
      <ul id="popupMenuOptStatus" class="mini-menu" style="display:none;">
         <li onclick="alert('状态一')" >状态一</li>
         <li onclick="alert('状态二')" >状态二</li>
      </ul>
      <br />
      <a class="mini-button">按钮二</a>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>

</body>
</html>
<script language="javascript">

mini.parse();


</script>

作者: julianzhu1117 时间: 2014-9-26 23:20:04

felt 发表于 2014-9-26 16:52
请提供重现页面，本地测试未发现你说的问题

测试下来和toolbar的fixed有关，但是这个工具栏定位又必须用fixed才行

作者: julianzhu1117 时间: 2014-9-26 23:28:31

julianzhu1117 发表于 2014-9-26 23:20
测试下来和toolbar的fixed有关，但是这个工具栏定位又必须用fixed才行

我想我找到原因了，mini-ui把menu的z-index又设置为了1000，所以我必须把toolbar的z-index设置为小于1000才行

欢迎光临 jQuery MiniUI (http://miniui.com/discuss/)