CSS/HTML固定導航欄重疊內容

Question

我製作了一個粘貼到頁面頂部的導航欄，但它堅持一些內容，我嘗試在CSS文件中使用margin-top: 100px;，但這只是移動導航欄向下100px。有人有主意嗎？ Link to js fiddle

CSS

.con { 
    overflow: hidden; 
    background: #159B00; 
    width: 1000px; 
    height: 376px; 
    border-radius: 10px; 
    border: 2px solid black; 
    box-shadow: 0 4px 8px black; 
} 
.nav { 
    padding-top: 0px; 
    background: #fff; 
    height: auto; 
    width: 100%; 
    z-index: 150; 
    top: o; 
    position: fixed; 
    box-shadow: 0 2px 3px rgba(0,0,0,.4); 
} 

HTML

 <div class="nav"> 
      <div id="nav_wraper"> 
       <ul> 
        <li><a href="RUN ME.html"> 
         </div> 
         </a></li>  
         </a> 
         </li><li> 
         <a href="index.html">Home</a> 
         </li><li> 
         <a href="#">Designs&#x25BC;</a> 
          <ul> 
          </ul> 
         </li><li> 
         <a href="#">About&#x25BC;</a> 
          <ul> 
          </ul> 
         </li><li> 
         <a href="#">Contact&#x25BC;</a> 
          <ul> 
          </ul> 
         </li> 
        </ul> 
       </div> 
     </div> 
     <main> 
      <div id="iG" class="con" > 
       <img src="slider.png" alt="" /> 
       <img src="step_1.png" alt="" /> 
       <img src="step_2.png" alt="" /> 
       <img src="step_3.png" alt="" /> 
       <img src="slider.png" alt="" /> 
      </div> 
     </main> 

感謝。

Answer 1

您可以通過添加

body{ 
padding-top:100px; 
} 

解決這個問題，你必須在

.nav{ 
top:o; 
} 

語法錯誤，應該是

.nav{ 
top:0; 
} 

updated fiddle