无法让 z-index 在另一个 div 内的 div 上工作

发布于 2024-10-08 00:37:08 字数 693 浏览 5 评论 0原文

我正在尝试让下拉菜单起作用。它由一个 LI 和一个当 LI 悬停时出现的 DIV 组成。我希望将父项绘制在子项前面，以便我可以创建具有重叠边框的选项卡式效果。我无法让孩子被拉到父母后面。

下面的代码也有同样的问题：

<div id="test_1">
    Test 1
    <div id="test_2">
        Test 2
    </div>
</div>

和 CSS

#test_1 {
    border:1px solid green;
    width:200px;
    height:200px;
    background-color:#fff;
    position:relative;
    z-index:999;
}

#test_2{
    border:1px solid red;
    width:200px;
    height:200px;
    background-color:#fff;
    position:relative;
    top:-10px;
    left:-10px;
    z-index:900;
}

上面的代码将在 test_1 的前面绘制 test_2。我希望 test_2 绘制在 test_1 之后。我怎样才能让它做到这一点？感谢您的任何帮助。

原文

I'm trying to get a drop down menu to work. It consists of an LI with a DIV that appears when the LI is hovered. I want the parent to be drawn in front of the child so that I can create a tabbed effect with the overlapping borders. I can't get the child to be drawn behind the parent.

The following code has the same problem:

<div id="test_1">
    Test 1
    <div id="test_2">
        Test 2
    </div>
</div>

And the CSS

#test_1 {
    border:1px solid green;
    width:200px;
    height:200px;
    background-color:#fff;
    position:relative;
    z-index:999;
}

#test_2{
    border:1px solid red;
    width:200px;
    height:200px;
    background-color:#fff;
    position:relative;
    top:-10px;
    left:-10px;
    z-index:900;
}

The above code will draw test_2 in FRONT of test_1. I want test_2 to be drawn BEHIND test_1. How can I get it to do that? Thanks for any help.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

指尖上的星空 2024-10-15 00:37:08

定位的容器始终包含其子容器。容器的内容不能位于容器本身下方。请参阅我（大约 7 年前）制作的显示情况的此测试文件。

请特别注意，深蓝色 div 为 z-index:-100，但不会出现在其 z-index:3 父容器下方，也不会出现在不同的 < code>z-index:2 容器是它的“叔叔”（其父级的兄弟）。

元素的 z-index 仅对于使用相同定位容器的其他元素有效。一旦您在 test_1 上设置了 position:relative，您就会导致其 z-index 与 z-index 处于不同的世界test_2 的。您可以做的最接近的操作是设置 #test_2 { z-index:-1 } 使其显示在 #test_1 内容下方（但不在其背景下方）。