职位：固定;做一些时髦的东西到我的CSS菜单

Question

我想我的.nav被固定和向下滚动页面，但我不知道如何阻止它搞乱了位置：fixed;被放入。

JSFIDDLE without position:fixed

 <div class="top"> 
     <p id="day"></p> 
      <script> { 
       var d = new Date(); 
       var n = d.getDate(); 
       document.getElementById("day").innerHTML = n; 
       } 
      </script> 
      /
     <p id="month"></p> 
      <script> { 
       var d = new Date(); 
       var n = d.getMonth(); 
       document.getElementById("month").innerHTML = n; 
       } 
      </script> 
      /
     <p id="year"></p> 
      <script> { 
       var d = new Date(); 
       var n = d.getYear(); 
       document.getElementById("year").innerHTML = n-100; 
       } 
      </script> 

     &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 

     J O H N &nbsp; &nbsp; SM I T H 
    </div> 

    <div class="nav"> 
     <ul> 
      <li><a href="#">C O N A C T</a></li> 
      <li><a href="#">A B O U T</a></li> 
      <li><a href="example2.html">H O M E</a></li> 

     </ul> 
    </div> 

    <div class="main"> 
     This is my website. 
    </div> 

如何实现“固定”我想我可能是做错了。

.top { 
background-color: #333333; 
opacity:0.85; 
padding: 16px; 
color: white; 
font-family: Lato; 
font-size: 16px; 
vertical-align: middle; 
margin: 0; 
position: fixed; 
width: 100%; } 


.top p { 
display: inline; } 

.nav { 
top: 0; 
left: 0; 
position: fixed; } 


.nav li  { 
list-style-type: none; 
z-index: 1; 
position: relative; 
width: 115px; 
margin-right: 40px; 
text-align: center; 
float: right; 
right: 20px; } 


.nav a  { 
    display: inline-block; 
    padding: 15.5px; 
    text-decoration: none; 
    color: white; 
    font-family: Lato; 
    opacity: 0.6; } 

Answer 1

它的工作原理与position: fixed但你需要设置right而不是left。

.nav {position: fixed; top: 0; right: 0;} 
.nav ul {margin-top: 0;} 

http://jsfiddle.net/cvdbumw7/6/

要修复您的顶部导航