如何有力地显示div

Question

我正在使用backbone.js次观看。

我有一个可扩展的主干视图列表，里面有我的表。其中一列有dropdown div。

此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>

css over the drop div：

.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;
}

Answer 1

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

所以我只是简单地将dropdown div的z索引缩小到小于父列表div。问题解决了。

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