0

基本上创建一个带有下拉菜单的网页，我按照教程编写。我的页面布局由 3 个单独的表格组成，其中 1 个用于标题/横幅，1 个用于下拉菜单，1 个用于正文/内容。

我首先遇到的问题是，当我滚动下拉菜单时，它会落在我的正文/内容表后面。我找到了一个解决方法，它包括 z-index:-1。这在 IE 中运行良好，但在 chrome 中对其进行测试后，它阻止了链接和 iframe 在内容/正文表上进行交互。

#bodytable {width:1100px;
        height:100%;
        margin:auto;
        position:relative;
        top:10px;
        z-index:-1;
        }

完整的 .css 代码可以在这里找到：

http://pastebin.com/T97JAjQ8

4

2 回答 2

2

尝试给它们每个正的 z-index 值。显然，较高的数字将“在”另一个价值较小的数字之上。不是给表格“-1”，而是给它一些积极的东西，比如 10，并使下拉菜单“20”。您甚至可以将主体的 z-index 设置为 0 作为基线。

我还没有证实这一点，但可能是 chrome 不喜欢负 z-index 值。

于 2013-01-06T07:22:37.547 回答
0

提供负 z-index 会使您的元素位于 body 或 wrapper div 下，因此，当您单击事件发生在 body 标签而不是 table 标签上时，body 元素位于该表的顶部，因此阻止它们进行交互。您必须给出正的 z-index 值。元素的默认堆叠顺序由定义元素的位置确定。例如，如果在菜单 div 之后定义表，则表的 z-index 值将更大。您可以通过仅更改当前堆栈顺序来解决您的问题。只需将负值更改为正值即可。

element {
z-index:1;
}

上面的代码会将目标元素设置在当前堆栈顺序之外的其他元素之上。

于 2013-01-06T07:39:27.593 回答