css - 内容覆盖的嵌入阴影

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

你需要给你的侧边栏一个更大的z-index比你的 li 元素。理想情况下，侧边栏的 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;
}