CSS stickied登錄按鈕頂端

Question

我想讓這樣的事情：

http://puu.sh/1b5jU

所以我做的東西在這裏，但它看起來並不相同的所有畫面上還是在其內部引導容器，960像素：

http://justxp.plutohost.net/slyfiles/index.html

它看起來像朋友的屏幕上的內容：

http://puu.sh/1b51h

這是它的CSS所有

.delogin { 
width: 70px; 
height: 20px; 
background-color: #443b28; 
-webkit-border-radius: 0px 0px 7px 7px; 
border-radius: 0px 0px 7px 7px; 
position: absolute; 
margin-left: 51%; 
-webkit-transition: all 100ms ease-in-out; 
     -moz-transition: all 100ms ease-in-out; 
     -ms-transition: all 100ms ease-in-out; 
     -o-transition: all 100ms ease-in-out; 
     transition: all 100ms ease-in-out; 
} 

.login { 
width: 70px; 
height: 20px; 
background-color: #443b28; 
-webkit-border-radius: 0px 0px 7px 7px; 
border-radius: 0px 0px 7px 7px; 
position: absolute; 
margin-left: 51%; 
right: 0px; 
-webkit-transition: all 100ms ease-in-out; 
     -moz-transition: all 100ms ease-in-out; 
     -ms-transition: all 100ms ease-in-out; 
     -o-transition: all 100ms ease-in-out; 
     transition: all 100ms ease-in-out; 
} 
.login:hover{ 
width: 70px; 
height: 20px; 
background-color: #443b28; 
-webkit-border-radius: 0px 0px 7px 7px; 
border-radius: 0px 0px 7px 7px; 
position: absolute; 
margin-left: 51%; 
top: 5px; 
-webkit-transition: all 100ms ease-in-out; 
     -moz-transition: all 100ms ease-in-out; 
     -ms-transition: all 100ms ease-in-out; 
     -o-transition: all 100ms ease-in-out; 
     transition: all 100ms ease-in-out; 
} 

#login { 
float: right; 
margin-right: 11px; 
font-weight: bold; 
font-size: 11px; 
color: #fff; 
-webkit-transition: all 100ms ease-in-out; 
     -moz-transition: all 100ms ease-in-out; 
     -ms-transition: all 100ms ease-in-out; 
     -o-transition: all 100ms ease-in-out; 
     transition: all 100ms ease-in-out; 
    } 
    #lock { 
    background-image: url("../img/lock.png"); 
    width: 13px; 
    height: 10px; 
    position: absolute; 
    top: 5px; 
    left: 7px; 
-webkit-transition: all 100ms ease-in-out; 
     -moz-transition: all 100ms ease-in-out; 
     -ms-transition: all 100ms ease-in-out; 
     -o-transition: all 100ms ease-in-out; 
     transition: all 100ms ease-in-out; 
    } 

HTML：

<div class="delogin"> 
     <div class="login"> 
      <div id="lock"></div> 
      <span id="login"><a href="login.php">LOGIN</a></span> 
     </div> 
    </div> 

這是如果需要整個HTML \ CSS：

http://pastebin.com/qJkA99nW

問題：

如何將登錄按鈕粘貼到960像素網格系統內的右側，而不使菜單將任何像素移動到任何一側？並在所有屏幕和瀏覽器上使它看起來有點相似或相似。

我從來沒有見過這樣的問題或教程如何使這樣的粘性按鈕。

謝謝！

Answer 1

添加position: relative您.container

.container { 
    margin-left: auto; 
    margin-right: auto; 
    position: relative; /* this */ 
} 

，然後設置按鈕

.delogin { 
    -moz-transition: all 100ms ease-in-out 0s; 
    background-color: #443B28; 
    border-radius: 0 0 7px 7px; 
    height: 20px; 
    margin-left: 51%; 
    position: absolute; 
    right: 0; /* this */ 
    width: 70px; 
}