CSS将登录按钮粘贴到顶部

我想做这样的东西：

所以我在这里做了一些事情，但是当它在引导容器960px中时，在所有屏幕上看起来都不一样：

在朋友的屏幕上是什么样子的：

这是所有的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:

这是整个HTML\CSS（如果需要）：

问题:

如何将登录按钮粘贴到960px网格系统的右侧，而不使菜单将任何像素移动到任何一侧？让它在所有的屏幕、浏览器上看起来都一样或相似

我从未见过关于如何制作这样一个粘性按钮的此类问题或教程

---

谢谢

将

位置：相对
添加到您的
.container

.container{
左边距：自动；
右边距：自动；
位置：相对；/*此*/
}

然后设置按钮的位置

.delogin{
-moz转换：所有100毫秒都可从0秒变为0秒；
背景色：#443B28；
边界半径：0 0 7px 7px；
高度：20px；
左边缘：51%；
位置：绝对位置；
右：0；/*此*/
宽度：70px；
}
我正在努力理解你的问题，你能把你的东西放到JSFIDLE中吗？我希望按钮在联系人菜单项上，而不向下移动整个菜单，并且在所有浏览器或屏幕大小中都处于同一位置。是的，但是缩小屏幕，按钮会移到一边，我的朋友也是这样，现在就在twitter菜单上方。刚刚签入FF和Chrome-它停留在“联系人”上方这应该可以工作，但是在容器上设置为
位置：相对*缩放：1
-这会导致按钮在我的屏幕上移动Nope Chrome，不知怎的，它是固定的。我加了float：对，把菜单向上向右移动了一点，但是你的回答帮助了我。
  <div class="delogin">
      <div class="login">
             <div id="lock"></div>
             <span id="login"><a href="login.php">LOGIN</a></span>
      </div>
  </div>