Фоновый z-индекс с функционирующими якорями

Question

Итак, у меня есть этот код:

<div style="position:fixed;left:0;top:65px;border:1px solid blue;background-color:#D5BF9D;width:190px;z-index:-1">
        <h1>title</h1>
        <nav><ul>
            <li><a href="#apples">Apple</a></li>
            <li><a href="#s">s</a></li>
        </ul></nav>
    </div>
    <div class="italic" style="border:1px solid red;z-index:99;background-color:white">Pack my box with five dozen liquor jugs.</div>

Это работает, за исключением того, что ссылки больше не работают, так как z-index равен -1. Есть ли способ сохранить внешний вид, но дать функциональность ссылкам? Я попытался сделать текущую ссылку div прозрачной с z-индексом 0 и поместить другой div с нужным цветом, но ничего не вышло. Есть идеи. Заранее спасибо.

Answer 1

<div style="position:fixed;left:0;top:65px;border:1px solid blue;background-color:#D5BF9D;width:190px;z-index:-1"></div>
        <h1>title</h1>
        <div style="background-color:transparent"><nav><ul>
            <li><a href="#apples">Apple</a></li>
            <li><a href="#s">s</a></li>
        </div></ul></nav>
    <div class="italic" style="border:1px solid red;background-color:white">Pack my box with five dozen liquor jugs.</div>

Я закончил тем, что делал выше. создайте пустой div с z-index:-1 вне основного раздела с нужным фоном. Затем сделать основной раздел фоновым цветом: прозрачным.