當主頁面內容加載時，左側導航菜單消失，爲什麼？

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行