移动网站上的 z-Index

Question

我正在尝试为自己设计个人网站的移动视图。
菜单应使用 jQuery 下拉。所以下面的代码在 Firefox 上运行完美，但不幸的是在我的 iPhone 的 Safari 浏览器上不行。我已经尝试了几种解决方法并阅读了互联网上的许多帖子，但 none 有效。

这是我的页面正文：

<script src="js/main.js"></script>
    <aside>
        <img src="images/avatar.png" class="avatar"/>
        <nav>
            <ul>
                <li id="home" class="active"><a onclick="view_page('home'); return false;">Home</a></li>
                <li id="projects"><a onclick="view_page('projects'); return false;">Projects</a></li>
                <li id="contact"><a onclick="view_page('contact'); return false;">Contact</a></li>
            </ul>
        </nav>
        <a class="dropdown"><img src="images/arrow.png" /></a>
    </aside>
    <main>
        <div class="content">
            <h2>About me.</h2>
            <p id="justify">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </p>
        </div>
    </main>

这里是手机 CSS 部分的相关部分：

aside nav{
    margin-top: 0.5em;
    background: white;
    text-align: center;
    display: none;
    position: relative;
    z-index: 30;
    width: 100%;
}
main{
    margin-top: 4.1em;
    width: 100%;
    margin-left: 0em;
    position: relative;
    z-index: 10;
}

当我在浏览器中打开整个页面时，应该使用 z-index 将菜单置于最前面。但它显示在后台。我做错了什么（可能是 z-index）？

Answer 1

aside nav 不需要 position: relative 和 z-index，请将 z-index: 30 移动到 aside。像这样：

aside {
    ...
    z-index: 30;
}

aside nav {
    margin-top: 0.5em;
    background: white;
    text-align: center;
    display: none;
    width: 100%;
}

main {
    margin-top: 4.1em;
    width: 100%;
    margin-left: 0em;
    position: relative;
    z-index: 10;
}

阅读关于 z-index 的作品 — http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/。

移动网站上的 z-Index

z-Index on mobile site

html

css

z-index

css-position