内容覆盖的插图阴影

Question

我正在创建一个幻灯片菜单。我需要一个阴影来将原始内容与菜单分开，这不是问题 - 这是使用插入框阴影完成的。但是我还需要为某些内容设置背景。突出显示黄色的区域是阴影应该出现的区域，但是，在该区域内，我有一个由UL / LI构成的菜单，LI需要具有不同的背景颜色（突出显示为红色）。

在LI给出背景颜色的情况下，阴影被覆盖。

我已经搜索了一个解决方法但尚未提出任何建议。任何CSS大师都建议一个解决方案？

以下代码：

<nav id="mobile-nav">
    <ul>
        <li><h3>My Stuff</h3></li>
        <li><a>Nav item 1</a></li>
        <li><a>Nav item 2</a></li>
        <li><a>Nav item 3</a></li>
        <li><h3>Help & Info</h3></li>
        <li><a>Nav item 4</a></li>
        <li><a>Nav item 5</a></li>
        <li><a>Nav item 6</a></li>
    </ul>
</nav>

#mobile-nav
{
    .InnerShadow(-1.5em, 0, 1.5em, -0.75em);
    background-color:@navy;
    height:100%;
    left:-22.4rem;
    position:absolute;
    top:0;
    width: 22.4rem;
    z-index: 2;
}

#mobile-nav ul
{
    position: relative;
    z-index: 1;
}

#mobile-nav li
{
    border-bottom:solid 0.1rem @navy1;
}

#mobile-nav li:first-child
{
    border-top:0;
}

#mobile-nav li > *
{
    color:#FFF;
    line-height:3.6rem;
    height:3.6rem;
    padding:0 1rem;
}

#mobile-nav li h3
{
    background-color:@fern;
    border-top:solid 0.1rem @fernL1;
}

#mobile-nav li a
{
    border-top:solid 0.1rem @navy-1;
    display:block;
    padding-left:2rem;
}

Answer 1

您需要为侧栏提供比li元素更大的z-index。理想情况下，您的侧边栏应该比您网页上的所有其他内容都要大z-index。

  

z-index CSS属性指定元素及其后代的z顺序。当元素重叠时，z顺序决定哪一个覆盖另一个。具有较大z-index的元素通常覆盖具有较低元素的元素。

ul {
    position: relative;
    z-index: 1;
}

div.sidebar {
    position: relative;
    z-index: 2;
}

Answer 2

我添加了一个新的阴影div并使用以下代码放在顶部：

#mobile-nav .shadow
{
    .InnerShadow(-1.5rem, 0, 1.5rem, -1.5rem, 0.4);
    background-color:Transparent;
    height:100%;
    left:0;
    position:absolute;
    top:0;
    width:100%;
}