Question

我有一个基于css的下拉菜单。我想通过将绝对定位的子元素的边框与父元素上的白色底边框重叠来创建标签样式效果：

----------------------
| Parent  | Parent 2 |
|          -----------------|
| Child content             |
-----------------------------

通过相应地设置z-index可以实现吗？我不能让这个工作。

请参阅此小提琴：http://jsfiddle.net/huo1rfL4/2/

Answer 1

DEMO

<ul>
    <li>Entry

    </li>
    <div class="sub">

        </div>
</ul>

ul{position:relative;}

ul li
{
    display: inline;
    border-top: 1px solid #434343;
        border-right: 1px solid #434343;
        border-left: 1px solid #434343;
    border-bottom: 0px solid #ffffff;
        z-index:200;
        background:yellow;
    position: absolute;
}

.sub
{
    position: absolute;
    background-color: yellow;
    border: 1px solid #434343;
     border-top: 1px solid #434343;
    width: 200px;
    height: 200px;
    margin-top: -2px;
    top:20px;
    z-index: 1;
}

Answer 2

<li class="maximenuCK parent first item1068 level0 " style="z-index : 12000;">

将其z-index更改为1200

<li class="maximenuCK parent first item1068 level0 " style="z-index : 1200;">

父重叠子项创建选项卡样式效果

2 个答案: