内容覆盖的嵌入阴影

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 大于页面上的所有其他内容。

The z-index CSS property specifies the z-order of an element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one.

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%;
}

内容覆盖的嵌入阴影

Inset shadow covered by content

css