切换z-index属性时遇到问题

Question

在给定的html文档中使用某些div标签的z-index属性时，是否可以推荐一个可以提供html页面内容堆栈视觉效果的好工具？

目前，我正面临这个令人不安的错误，导致我无法导航到顶部导航菜单栏上的其他菜单链接。

http://cms.tmadev.com.au/companyprovider.html

在花了一些时间进行故障排除后，我发现顶部菜单导航栏由于图像标识而被“禁用”的原因。

<div class="logo">
    <img src="images/CRSlogo.png" alt="">
</div>

如果仔细查看html文件，如果删除此div类徽标，顶部菜单导航栏链接将恢复正常。

因此我怀疑它是因为它的默认z-index值（无论它是什么），它导致图像在顶部菜单导航栏的前面。

我试图破解CSS以将其z-index推回到-9999 - 但它不起作用！链接仍然被禁用。

我应该如何正确处理z-index属性？

干杯！

Answer 1

当我查看点击了哪个按钮的示例：“Administrator”时，我得到div“middle”，因此有必要为“{{1}”提供更强的价值}“，还有一个较低的”menu_tab" z-index: 2“;

http://fr.html.net/tutorials/css/figure020.gif

特使！

Answer 2

因此FireFox在其网络检查器中有一个3D视图，这是Google主页的3D视图：

启用它：

1. 访问您的网站
2. 打开开发工具（查看＆gt;工具栏＆gt; Web开发工具栏）
3. 选择“检查器”标签，然后从同一标签栏右侧第三个选择3D框。

Answer 3

作为一种做法，尽量避免给元素赋予明确的高度

继承修复

HTML

<div class="header">
    .. some other content ...
</div>

CSS

.header {
    /*height:100px --avoiding height */
    overflow:hidden; /* one way to force element containing floated elements to have a height */
}

有关上述overflow-hidden-float-trick here

的详细信息

虽然以上内容应该有效，但如果你的导航有一些下拉，很可能会因为父级的溢出属性设置为'隐藏'而被切断

清除花车的好方法是使用名为“clearfix”的详细here和there以及everywhere

所以，

HTML

<div class="header clearfix"> <!-- notice the new clearfix class -->
    .. some other content ...
</div>

CSS

.header {
    /*height:100px --avoiding height */
    /* overflow:hidden; --not required */
}

.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
    clear:both;
}
.clearfix {
    *zoom:1; /* for ie7 */
}

Answer 4

.header {height: 140px;} without z-index system

Varinder说真的！