旁边的HTML隐藏了我的js导航栏

Question

I'm working on my own personal site here . 我正在这里建立自己的个人网站。 If you hover over any of the nav bar elements you will notice there is some flicker and not all of the elements are visible. 如果将鼠标悬停在任何导航栏元素上，您会注意到存在一些闪烁，并且并非所有元素都可见。 You can verify this via F12 . 您可以通过F12进行验证。 It seems to me that the <aside> tag is "hiding" the info I'm looking for. 在我看来， <aside>标签正在“隐藏”我正在寻找的信息。

Would someone please tell me how to bring the nav bar to the front of something. 有人可以告诉我如何将导航栏置于某物的前面。 I'm not really sure what's going on here. 我不太确定这是怎么回事。

index.php : index.php ：

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>Grown Kidd Creations</title>
        <link rel="stylesheet" href="css/main.css">
        <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
            });
        </script>
    </head>
    <body>
        <header>
            <img alt="Picture of me and Cian" src="img/caindaddysleepin.jpeg" title="Cian and Daddy">
            <?include_once 'nav/nav.php';?>
        </header>
        <aside class="left"><p>No idea what to put here. how about you fill out the form and tell me?</p></aside>

        <aside class="right">
            Recent News/Updates:<br/>
            <span class="undercon">This will be updated soon with links and maybe a blog.</span>
            <ul>
                <li>Cian</li>
                <li>Work</li>
                <li>Family</li>
            </ul>
        </aside>
        <footer>
            Send me some love at <a href="mailto:billythakidd04@gmail.com">BillyThaKidd04@gmail.com</a><br/>
            Or find me at:<br/>
            <div class="g-plus" data-href="https://plus.google.com/109325835178774768962?prsrc=3" data-theme="dark" rel="author"></div>
            <a href="https://twitter.com/ThaKidd04" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @ThaKidd04</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
        </footer>
    </body>
</html>

nav.php

<?//navigation bar?>
<script>
    var el = document.getElementsByTagName("body")[0];
    el.className = "";
</script>
<noscript>
<!--[if IE]>
    <link rel="stylesheet" href="nav/css/ie.css">
<![endif]-->
</noscript>
<link rel="stylesheet" href="nav/css/nav.css">
    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <nav id="topNav" class="no-js">
        <ul>
            <li><a href="index.php" title="Home">Home</a></li>
            <li><a href="#" title="Projects">Projects</a>
                <ul>
                    <li><a href="" title="Personal Projects">Personal Projects</a></li>
                    <li><a href="" title="Work Projects">Work Projects</a></li>
                    <li class="last"><a href="pages/sitepage.php" target="new" title="About this site">This Site</a></li>
                </ul>
            </li>
            <li><a href="contactme.php" title="Contact Me">Contact Me</a>
                <ul>
                    <li><a href="http://www.facebook.com/BillyThaKidd" target="new" title="FaceBook">FaceBook</a></li>
                    <li><a href="" target="new" title="Google Plus">Google +</a></li>
                    <li><a href="" target="new" title="LinkedIn">LinkedIn</a></li>
                    <li class="last"><a href="" title="Email Me">Email Me</a></li>
                </ul>
            </li>
            <li><a href="/pages/viewblog.php" title="About Me">About Me</a>
                <ul>
                    <li><a href="/pages/viewblog.php">Blog</a></li>
                    <li><a href="" title="Resume">Resume</a></li>
                    <li class="last"><a target="new" href="https://github.com/billythakidd04" title="GitHub">GitHub</a></li>
                </ul>
            </li>
        </ul>
    </nav>
    <script src="nav/js/modernizr.custom.69568.js"></script>
    <script>
        (function($)
        {
            //cache nav
            var nav = $("#topNav");

            //add indicators and hovers to submenu parents
            nav.find("li").each(function()
            {
                if ($(this).find("ul").length > 0)
                {
                    $("<span>").text("").appendTo($(this).children(":first"));

                    //show subnav on hover
                    $(this).mouseenter(function()
                    {
                        $(this).find("ul").stop(true, true).slideDown();
                    });

                    //hide submenus on exit
                    $(this).mouseleave(function()
                    {
                        $(this).find("ul").stop(true, true).slideUp();
                    });
                }
            });
        })(jQuery);
    </script>

Answer 1

You should post your css since it seems that the whole issue is connected—or at least can be solved—by a z-index adjustment: 您应该发布css因为似乎整个问题都可以通过z-index调整解决，或者至少可以解决：

The z-index CSS property specifies the z-order of an element and its descendants. z-index CSS属性指定元素及其后代的z顺序。 When elements overlap, z-order determines which one covers the other. 当元素重叠时，z顺序确定哪个覆盖另一个。 An element with a larger z-index generally covers an element with a lower one. 具有较大z索引的元素通常会覆盖具有较低z索引的元素。

旁边的HTML隐藏了我的js导航栏

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-02-03 18:12:03

旁边的HTML隐藏了我的js导航栏

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-02-03 18:12:03

解决方案1
1 已采纳 2013-02-03 18:12:03