css - 固定页面中间按钮的固定位置

Question

我的页面有一个固定宽度的大 div，如下所示：

#index_body{
  width: 1010px;
  background-image: url('images/main_bg_dark.png'); 
  margin: auto;
  overflow: hidden;
  min-height: 50px;
  padding-bottom: 10px;
  border-radius: 7px;
  -moz-box-shadow: 0 5px 15px #000000;
  -webkit-box-shadow: 0 5px 15px #000000;
  box-shadow: 0 5px 15px #000000;
}

我想在页面右侧（垂直中间）添加按钮（20x20px） - 仍然在 index_body 旁边。

所以按钮有代码，如下所示：

#butt {
  width:20px;
  height:20px;
  background: url('images/scrollUp.png');
  position:fixed;
  top:50%;
  left:WHAT SHOULD BE HERE??
}

因为这取决于实际分辨率。我的 index_body 始终居中。如果我更改分辨率，我的按钮将移动到左右...

Answer 1

不要设置leftorright位置，而是确保按钮元素位于索引元素内，然后使用边距。

margin: 0px 0px 0px 1010px;

这是带有您的代码的经过测试和工作的版本 - http://lukewakeford.co.uk/testsite/blackbutton/

Answer 2

#butt {
  width:20px;
  height:20px;
  background: url('images/scrollUp.png');
  position:fixed;
  top:50%;

  right: 10%;
}

10% 是一个示例，更改为看起来不错的百分比，它应该响应屏幕分辨率。

另一方面，为什么要在固定容器内使用固定元素？只需将其设为绝对并将其浮动到右侧并留有余量即可。

Answer 3

好的，应该是这样的：

#butt {
  width:20px;
  height:20px;
  background: url('images/scrollUp.png');
  position:fixed;
  top:50%;
  margin-left: 1010px;
}