当主页面内容加载时，左侧导航菜单消失，为什么？

Question

这使我坚果....按此页http://kudosoo.com/twofolio.html

有一个左导航工作正常的问题。菜单的顶部部分在加载时消失。我试着用不同的方式调整css和html来解决这个问题，但是迄今为止还没有任何工作。

我相信它与#container或drop dwon菜单在页面上的显示方式似乎都位于菜单的顶部。

感谢您的帮助。

主页面代码如下。示例页面在这里

<div id="preloader"> 
    <div id="status"> 
     <p class="center-text"> 
      Loading the content... 
      <em>Loading depends on your connection speed!</em> 
     </p> 
    </div> 
</div> 


<div class="all-elements"> 
    <div id="sidebar" class="page-sidebar"> 
     <div class="page-sidebar-scroll"> 
      <div class="sidebar-controls"> 
       <a href="https://www.facebook.com/Kudosoo?fref=ts" target="blank" class="sidebar-face"></a> 
       <a href="https://twitter.com/kudosoo" target="blank" class="sidebar-twit"></a> 
       <a href="#" class="sidebar-close"></a> 
      </div> 


      <div class="sidebar-header"> 
       <img class="sidebar-logo round-decoration" src="images/general-nature/8s.jpg" alt="img"> 
       <h4 class="center-text">kudosoo</h4> 
       <em class="center-text">Get badged today</em> 
      </div> 

      <div class="sidebar-breadcrumb"> 
       <div class="sidebar-decoration"></div> 
       <p>Navigation</p> 
       <div class="sidebar-decoration"></div> 
      </div> 

      <div class="navigation-items"></div> 
      <div class="nav-item"> 
       <a href="http://kudosoo.com/user_home.html" class="home-nav">Home<em class="unselected-nav"></em></a> 
      </div> 
      <div class="sidebar-decoration"></div> 
      <div class="nav-item"> 
       <a href="#" class="features-nav submenu-deploy">Activity<em></em></a> 
       <div class="nav-item-submenu active-submenu"> 
        <div class="sidebar-decoration"></div> 
        <a href="mybadges.html">Received   <em class="unselected-sub-nav"></em></a> 
        <a href="awardedbadges.html">Awarded  <em class="unselected-sub-nav"></em></a> 
        <a href="friends.html">Friends  <em class="unselected-sub-nav"></em></a> 
       </div> 
      </div> 
      <div class="sidebar-decoration"></div> 
      <div class="nav-item"> 
       <a href="http://kudosoo.com/selectbadge.html">Select Badge<em class="dropdown-nav"></em></a> 
       <div class="nav-item-submenu"> 
        <div class="sidebar-decoration"></div> 
        <a href="widefolio.html">Wide item Portfolio  <em class="selected-sub-nav"></em></a> 
       </div> 
      </div> 
      <div class="sidebar-decoration"></div> 
      <div class="nav-item"> 
       <a href="user_profile.html" class="contact-nav">My Profile<em class="unselected-nav"></em></a> 
      </div> 
      <div class="sidebar-decoration"></div> 
      <div class="nav-item"> 
       <a href="#" class="close-nav">Close<em class="unselected-nav"></em></a> 

      </div> 
     </div> 



     <div class="sidebar-breadcrumb"> 
      <div class="sidebar-decoration"></div> 
      <p>Let's get social!</p> 
      <div class="sidebar-decoration"></div> 
     </div> 

     <div class="navigation-items"> 
      <div class="nav-item"> 
       <a href="https://www.facebook.com/Kudosoo?fref=ts" target="blank" class="facebook-nav">Facebook<em class="link-nav"></em></a> 
      </div> 
      <div class="sidebar-decoration"></div> 
      <div class="nav-item"> 
       <a href="https://twitter.com/kudosoo" target="blank" class="twitter-nav">Twitter<em class="link-nav"></em></a> 
      </div> 
     </div> 

     <div class="sidebar-decoration"></div> 

     <p class="sidebar-copyright center-text">Copyright 2014. 
      <br>All rights reserved.</p> 

    </div> 
</div> 


<div id="content" class="page-content"> 
    <div class="content-controls solid-color fixed-header"> 
     <a href="#" class="deploy-sidebar"></a> 
     <em class="content-title">Who's getting Kudosoo today?!</em> 
     <a href="index.html" id="logout" class="deploy-contact button-icon icon-setting button-orange">LogOut</a> 
    </div> 
    <div class="fixed-header-clear"></div> 

    <!---HTML code not to change ends--> 

    <div class="content"> 


     <div id="container"> 
     </div> 


     <!--Search options to find firends, requests and rejections--> 

     <div id="friendsfilter"> 
      <form id="friendsfilter"> 
       <div class="error" style="display:none"></div> 

       <div class="form-group"> 
        <div class="input-group input-group-hg input-group-rounded"> 
         <span class="input-group-btn"> 
           <button id="find_button" type="button" class="btn"><span class="fui-search"></span> 
         </button> 
         </span> 
         <input type="text" id="friendsearch" placeholder="Find Friend" class="form-control" /> 
        </div> 
       </div> 

       <select name="huge" class="btn-group select select-block mbl select-multiple" id="s_Friends"> 
        <option value="0">Click to manage friend connections</option> 
        <option value="f_connected">Friends</option> 
        <option value="f_requests">Requests</option> 
        <option value="f_rejected">Declined</option> 
        <option value="f_sent">Sent</option> 
       </select> 

       <div id="FriendsConnected"></div> 
       <div id="FriendsPending"></div> 
       <div id="FriendsRejected"></div> 
       <div id="FriendsSent"></div> 
      </form> 
     </div> 


     <!--Friends profile info and stats--> 

     <div id="container friendsProfile"> 
      <form> 
       <div class="error" style="display:none"></div> 
       <button id="friendsProfile" class="button button-red">Unfriend</button> 
      </form> 
     </div> 



     <!--Displays a blank no user image on the page if no matches are found in the parse database or displays an image of the user if a match is found--> 

     <div id="container"> 

      <img style="display:none" src="/img/no-user.png" id="no_user" alt="No user found" class="BadgeImgOutline responsive-image"> 

      <div id="userimgs"></div> 

     </div> 

     <div id="container" class="container no-bottom"> 
      <!---List of connected friends is generated from script below, the different divs split the results depending which button is clicked--> 

      <div id="containerFriends"></div> 
      <div id="containerFriendsPending"></div> 
      <div id="containerFriendsRejected"></div> 
      <div id="containerFriendsRequestSent"></div> 
      <div id="containerFriendsConnected"></div> 
      <div id="containerFriendsProfile"></div> 


     </div> 


     <!--Displays friends uploaded badges after the user clicks on their profile picture--> 

     <div id="container"> 

      <div id="badgeimgs"></div> 

     </div> 

    </div> 
</div> 
</div> 
</div> 



<!--Footer stuff--> 

<div class="container"> 
    <div type="button" id="decline" class="btn btn-danger mrs"></div> 
    <div class="footer-socials"> 
     <a href="#" class="facebook-footer"></a> 
     <a href="#" class="goup-footer"></a> 
     <a href="#" class="twitter-footer"></a> 
    </div> 
    <p class="copyright uppercase center-text no-bottom">Copyright 2014 
     <br>All rights reserved</p> 

</div> 
<div style="height:350px"></div> 
</div> 
</div> 

Answer 1

我居然通过调整<div style="height:350px"></div>到

<div style="height:3350px"></div>解决了这个工作。菜单现在按预期工作。页面加载时不显示，但单击按钮显示时显示完整。

Answer 2

让你的侧边栏的Z-指数11您的网页内容的10

<div id="sidebar" style="z-index:11" class="page-sidebar"> 

Answer 3

我想管线135的z-index你关闭了DIV错误

除去至少线的侧条形码结束时从线135和关闭位置162的div

<div class="nav-item"> 
        <a href="#" class="close-nav">Close<em class="unselected-nav"></em></a> 

       </div> 
      </div> 

Answer 4

所以，我可以看到它..真的，导航不应该显示页面加载时，是正确的？当主页面内容向右滑动时显示导航？

z-index用于在HTML中对div进行排序。数字越高，它将被放置在页面上的“向前”（回到前面）。

目前，您<div id="content">有10 z-index的，而你的<div id="sidebar">有2

的z-index这意味着你的内容的div将被放置盈侧边栏DIV，引起的顶部侧边栏被隐藏。

更改CSS文件中的这些值将改变顺序。

.page-content就在你的style.css文件 .page-sidebar的9号线就在你的style.css文件的第25行