Question

我正在尝试将页脚/导航固定到屏幕的右下角，这样当您向下滚动时它将始终可见，当您拉动浏览器的右下角以使其变大时，它将保持固定状态在角落。当浏览器变小时，我也希望它缩小。我想办法在左上角但不是右边做这个。

我试过了

 position:fixed;
 bottom:0;
 right:0:

然而，这似乎不起作用。我在页面边缘和我的图像（http://i.imgur.com/FZoaLd0.jpg）之间留下了一个神秘的空间（在div上做一个负边距不会擦除这个空间）我也不想将其作为背景图像粘贴，因为我最终想把它变成一张图像地图。

抱歉，如果这令人困惑！我仍然是新手。

    <div id="footer">
<img src= "images/swirlfooter.png" width="75%" height="75%">
</div>

是空间的罪魁祸首的宽度和高度？如果是这样我将如何解决这个问题？只需创建我需要的确切尺寸的图像？

Answer 1

首先，如果你不想在滚动时移动它，你需要一个固定的位置。

#footer {
    position:fixed;
    right:0;
    bottom:0;
    margin:0;
    padding:0;
    width:75%;
}
#footer img {width:100%;}

清除边缘：

html, body {
   margin:0;
   padding:0;
}

小心，position:fixed，不幸的是不适用于iOS上的Safari（iPhone，iPad ......）

您可以看到 demo here 。

修改

另一个解决方案是将img放在页脚的背景中，如 example ：

#footer { position:fixed; right:0; bottom:0; margin:0; width:75%; height:75%; background:url(http://i.imgur.com/FZoaLd0.jpg) no-repeat bottom right; background-size:100%; }

Answer 2

绝对位置会随着滚动而移动。您需要的是positon:fixed;

#footer {
    position:fixed;
    bottom:0;
    right:0:
}

Answer 3

您需要position: fixed;。

您可能还想尝试清除正文和HTML边距：

html {
  margin: 0;
  padding: 0;
}
body {
  margin: 0;
  padding: 0;
}

是否包含位置设置为position: relative;的任何父容器？

Answer 4

使用

position:fixed;

而不是absolute。

固定将它始终保持在窗口的右下角滚动时绝对会发生变化。

Answer 5

HTML：

<div class="class-name">
   <img src="images/image-name.png">
</div>

CSS：

div.class-name {
    position: fixed;
    margin-top: -50px;
    top: 100%;
    left: 100%;
    margin-left: -120px;
    z-index: 11000;
}
div.class-name img{
    width: 100px;
}

根据您的图像高度更改margin-top。

如何将图像固定在右下角

5 个答案: