固定位置

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

确定，它应该只是这样的：

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

Answer 2

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

    right: 10%; 
} 

的10％就是一个例子，改变看起来很不错的百分比，它应该是响应的屏幕分辨率。

另一方面，为什么你想要一个固定的元素INSIDE一个固定的容器？只需将其设置为绝对值并将其向右移动一个边距即可。

Answer 3

而不是设置left或right位置，确保按钮元素是索引元素内，然后使用保证金。

margin: 0px 0px 0px 1010px;

下面是一个测试版的工作与你的代码 - http://lukewakeford.co.uk/testsite/blackbutton/