CSS and z-index: 列表中父元素下的子元素

Question

我正在为网上商店设计布局，遇到了一个似乎非常具体的问题。

有一个下拉导航，其设计看起来有点像下面有一个框的选项卡。关键是，选项卡（一级菜单项）和框（二级菜单项）之间有一条 1px 的边框线，我无法隐藏。

我想过给第二级框一个比第一级元素低的 z-index，但这并没有改变任何东西。我读了很多关于 z-index 的文章，它是如何工作的，它是如何不工作的，但是在一个列表中没有关于 z-index 的内容。

这是它应该的样子和它真正的样子：http://i.stack.imgur.com/xbQ6x.png

我创建了一个 codepen，当悬停在第一级项目时，它很好地显示了问题：http://codepen.io/anon/pen/bNqJxN

li .dropdown{
            overflow: hidden;
            position: relative;
            display: inline;
            visibility: hidden;
            position: absolute;
            padding:0;
            margin: 0 0 0 -1px; /*Putting a negativ margin-top here puts the box OVER the parent element :-( */
            background: #fff;
            border: 1px solid $light-grey;
            width: 280px;
            height: 200px;
            &.right {
                right: -1px;
                left: auto;
            }
            .dropdown-1-2 {
                float: left;
                width: 50%;
            }
        }

Answer 1

添加伪元素覆盖边框即可解决

li:hover:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: white;
    bottom: -1px;
    left: 0px;
    z-index: 999;
  }

codepen

Answer 2

我通常使用 z-index 来解决这个问题，让 li 的底部与下拉列表的顶部重叠。

在您的情况下，我必须删除位于 li 和下拉列表之后的 z-index 的 * 选择器，该选择器在该导航中的所有内容上将 z-index 重置为 2。相反，我只为第一个导航栏创建了一个堆叠上下文（here's an article on it），使其出现在第二个导航栏上方，然后我为 ul 位置相对和下拉列表提供了 -1 的 z-index 和 -1px 顶部边距以移动它就在未定位的li后面。

#mainnav {
    ...

    ul {
        @include reduced-list;
        ...
        position: relative;

        li .dropdown{
            ...
            margin: -1px 0 0 -1px;
            z-index: -1;

            ...

        &#nav1 {
            z-index: 2;
        }
        &#nav2 {
            z-index: 1;
        }

抱歉，codepen 没有保存。

Answer 3

非常感谢！

两个答案都很好地解决了我的问题！

我用这里的解决方案创建了一个代码笔：http://codepen.io/anon/pen/NPpQOq

ul {
        @include reduced-list;
        position: relative; /* YEAH */
        float:right;
        li .dropdown{
            overflow: hidden;
            position: relative;
            display: inline;
            visibility: hidden;
            position: absolute;
            padding:0;
            margin: -1px 0 0 -1px; /* YEAH */
            z-index: -1; /* YEAH */
            background: #fff;
            border: 1px solid $light-grey;
            width: 280px;
            height: 200px;
            &.right {
                right: -1px;
                left: auto;
            }
        }

将嵌套的子元素放置在父元素下似乎是可能的:-)

CSS and z-index: 列表中父元素下的子元素

CSS and z-index: child element under parent element in a list

css

menu

list

z-index