不同屏幕尺寸的div位置不固定答案

【问题标题】：Div position is not fixed in different screen sizes不同屏幕尺寸的div位置不固定
【发布时间】：2015-07-11 21:37:03
【问题描述】：

我正在为我的 wordpress 网站使用 Twitter Bootstrap。问题是我刚刚制作了一个 div 作为右侧栏并在其上放置了一些图像，这在我的桌面上似乎可以正常工作，但是当我在笔记本电脑上查看它时，它会改变它的位置并向下移动。

这是我的 div 和图片展示位置代码：

<div style="position:fixed; top:188px; right:0px; border:0px solid #f00; width:25px;"><a href="#"><img src="http://pearlacademy.com/wp/wp-content/uploads/2012/10/delhi.jpg" style="margin-bottom:5px;"></a>
<a href="#"><img src="http://pearlacademy.com/wp/wp-content/uploads/2012/10/noida.jpg" style="margin-bottom:5px;"></a>
<a href="#"><img src="http://pearlacademy.com/wp/wp-content/uploads/2012/10/jaipur.jpg" style="margin-bottom:5px;"></a>
<a href="#"><img src="http://pearlacademy.com/wp/wp-content/uploads/2012/10/chennai.jpg" style="margin-bottom:5px;"></a>
</div>

【问题讨论】：

为什么不以 % 为单位给出右上角的宽度，而以像素为单位给出？
仍然无法工作，伙计......我无法理解为什么？？请帮助我
@Mahindra Singh：尝试位置：绝对，而不是位置：固定
但问题是我想要固定位置是否可以固定？？？
@Mahindra Singh：您尝试过 absolute.absolute 是一种非常强大的定位类型，它允许您将任何页面元素准确地放置在您想要的位置。

标签： html wordpress twitter-bootstrap

【解决方案1】：

希望这种方法有帮助，如果我想使用纯 css，它会是这样的：

HTML：

<div class="sidebar">
    <div class="box">Your anchor tags here</div>
</div>

CSS：

html, body {
  height: 100%;
}

div.sidebar {
  position:fixed;
  right: 0px;
  width: 25px;
  height: 100%;
  border: 1px solid blue; /* just for developing, remove this later */
}

div.box {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  border: 1px solid #f00; /* depends on you ;) */
  height: 100px; /* unfortunately you have to set height property :| */
}

一个活生生的例子here ;)

【讨论】：

thnks evryone 帮助我......我现在解决了......我的问题是，使用 bootstrap aal 图像会根据屏幕尺寸自动调整大小，因为它们是通过响应式设计bootsrap 和我放置的 div 并没有因此而改变....