將HTML元素設置爲相對位置覆蓋頂部導航欄設置爲固定

我有一個頂部導航欄設置爲固定位置，並且我有一個文章元素設置爲窗口高度。當我將文章元素設置爲相對時，導航欄不再顯示。將HTML元素設置爲相對位置覆蓋頂部導航欄設置爲固定

我怎樣才能讓文章是窗口高度和導航欄只是有點休息。

這是我的代碼。

<article id="navWrap"> 
      <nav> 
       <ul> 
        <li><a href="#headWrap">Home</a></li> 
        <li><a href="#workWrapper">My Work</a></li> 
        <li><a href="#contactpage">Contact</a></li> 
       </ul> 
      </nav> 
     </article> 

     <article id="headWrap" class="head clearIt"> 
      <header> 
       <p class="headpar">Hello I'm</p> 
       <h1 class="headText">Sebastian</h1> 
       <p class="headinfo">Web Developer | Corona SDK Developer | PHP Junkie</p> 
      </header> 
     </article>

而CSS

#navWrap{ 
    height: 100px; 
    width: 100%; 
    position: fixed; 
} 

nav{ 
    width: 300px; 
    padding-top: 39px; 
    float: right; 
} 

nav ul{ 
    list-style: none; 
    margin: 0px; 
    padding: 0px; 
} 

nav ul li{ 
    display: inline; 
    margin-right: 30px; 
} 

nav ul li a{ 
    text-decoration: none; 
    font-family: 'Open Sans', sans-serif; 
    padding: 0px 0px 5px 0px; 
    margin: 0px; 
    color: #fff; 
} 

nav ul li a:hover{ 
    border-bottom: 1px solid #fff; 
} 

/*Used to clear floats*/ 
.clearIt{ 
    clear: both; 
} 

#headWrap{ 
    width: 100%; 
    height: 100px; 
    background-color: #2980b9; 
    position: relative; 
}

而且JS使文章窗口高度

<script type="text/javascript"> 
    $("#headWrap").height($(window).height()); 
</script>

來源

2015-03-19 user2684521

添加top:100px;到現有的CSS #headWrap推下來，下面#navWrap

#headWrap{ 
    top:100px; 
}

一旦你這樣做了，你就看不到白色背景上的白色文字。因此，請將background:#eee;添加到#navWrap的現有CSS中。

#navWrap{ 
    background:#eee; 
}

來源

2015-03-19 02:56:15 FactoryAidan

我結束了的z指數爲nav元件設置爲2。

並且元件的其餘部分我設置爲1。

來源

2015-03-19 03:14:30 user2684521

將HTML元素設置爲相對位置覆蓋頂部導航欄設置爲固定

回答

相關問題