Question

我试图为自己设计个人网站的移动视图。
菜单应该使用jQuery下拉。因此，以下代码在Firefox上运行完美，但遗憾的是不能在我的iPhone的Safari浏览器上运行。我已经尝试了几种解决方案并在互联网上阅读了很多帖子，但都没有奏效。

这是我的页面正文：

<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

position: relative上不需要z-index和aside nav，将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/。

Answer 2

尝试将您的z-index设置为一些荒谬的东西，例如9999，看看它是否可以解决问题。如果它没有，则可以安全地假设z-index不是问题。你有没有为手机游戏提供相关的CSS调用？

z-Index在移动网站上

2 个答案: