2

我正在使用backbone.js视图。

我有一个可扩展主干视图列表,其中有表格。其中一列有dropdowndiv。

这个 div 部分隐藏在另一个视图后面。在此处输入图像描述 在上图中dropdown,列表视图后面隐藏了一个视图。

所以我只想问如何强制 div 显示,而不是重叠。我不想使用固定位置,因为它会固定所有位置的位置。

需要注意的是:使用 mozilla 开发工具,在 3D 视图中我发现,div 视图位于 TOP MOST 层。 在此处输入图像描述

在浏览器中加载后我的html:

 <div class="dropdown open" >
<ul class="dropdown-menu" role="menu">
    <li><div class="menuitem"><label class="checkbox"><input type="checkbox" value="res" style="opacity: 0.0; position: absolute; left: -9999px">Response</label></div></li>
    <li><div class="menuitem"><label class="checkbox"><input type="checkbox" value="req" style="opacity: 0.0; position: absolute; left: -9999px">Request</label></div></li>
    </ul>
    </div>

下拉div上的css:

.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
background-color: white;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
4

1 回答 1

0

问题出在父列表 div 的 z 索引上。此父列表 div 的 z 索引大于 div 的 z 索引dropdown

所以我只是将 div 的 z 索引减少dropdown到小于父列表 div。问题就解决了。

还可以得出一个结论:Mozilla 3D 开发者视图,不处理 z 索引。它只是显示嵌套的 3D 视图。在 mozilla 3D 视图中,父 div 将始终显示在子 div 的后面,而不管其 z 索引如何。如果我在某个地方错了,请纠正我。

于 2013-08-03T05:17:18.437 回答