Html 如何保持图像固定在右下角
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15482859/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to keep image fixed at bottom right
提问by rachel
I am trying to make a footer/navigation fixed to the bottom right corner of the screen so when you scroll down it will always be visible, and when you pull the bottom right of the browser to make it bigger it will stay fixed in the corner. I would also like it to scale smaller when you make the browser smaller. I've figured a way to do this in the top left corner but not the right.
我正在尝试将页脚/导航固定在屏幕的右下角，这样当您向下滚动时，它将始终可见，而当您拉动浏览器的右下角使其变大时，它将保持固定在角落. 当您将浏览器缩小时，我还希望它缩小。我在左上角找到了一种方法来做到这一点，但不是在右边。
I have tried
我试过了
position:fixed;
bottom:0;
right:0:
however this doesn't seem to be working. I am left with a mysterious space between the edge of the page and my image (http://i.imgur.com/FZoaLd0.jpg) (doing a negative margin on the div does not erase this space) I also do not want to affix this as a background image because I eventually want to make it an image map.
但这似乎不起作用。我在页面边缘和我的图像之间留下了一个神秘的空间（http://i.imgur.com/FZoaLd0.jpg）（在 div 上做负边距不会擦除这个空间）我也不想要将此作为背景图像贴上，因为我最终想将其制作为图像映射。
sorry if this is confusing! I am still a newb at this.
对不起，如果这令人困惑！我在这方面还是个新手。
<div id="footer">
<img src= "images/swirlfooter.png" width="75%" height="75%">
</div>
is the width and height the culprit of the space? if so how would i fix that? just create the image in the exact size i need it to be?
宽度和高度是空间的罪魁祸首吗？如果是这样，我将如何解决这个问题？只需以我需要的确切尺寸创建图像？
回答by Valky
First, you need a fixed position, if you don't want it to move while scrolling.
首先，您需要一个固定位置，如果您不希望它在滚动时移动。
#footer {
position:fixed;
right:0;
bottom:0;
margin:0;
padding:0;
width:75%;
}
#footer img {width:100%;}
And to clear the margins :
并清除边距：
html, body {
margin:0;
padding:0;
}
Be careful, the position:fixed, unfortunatly doesn't work with safari on iOS (iPhones, iPads...)
小心，position:fixed不幸的是，它不适用于 iOS 上的 safari（iPhone、iPad...）
You can see a demo here.
Edit
编辑
Another solution is to put the img in background of the footer, like this example:
另一种解决方案是将 img 放在页脚的背景中，如下例所示：
#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%;
}
回答by Ibu
Position absolute will move with scroll. What you need is positon:fixed;
绝对位置将随滚动移动。你需要的是positon:fixed;
#footer {
position:fixed;
bottom:0;
right:0:
}
回答by Matt Clark
Use
用
position:fixed;
Instead of absolute.
而不是absolute.
Fixed will keep it always at the bottom right of the window.
Absolute changes as you scroll.
固定将使其始终位于窗口的右下角。
滚动时发生绝对变化。
回答by Plummer
You need position: fixed;.
你需要position: fixed;.
You also might want to try clearing the body and HTML margins:
您可能还想尝试清除正文和 HTML 边距：
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
Is it withing any parent containers that have position set to position: relative;?
是否与位置设置为 的任何父容器一起使用position: relative;？
回答by Khurram Ilyas
HTML:
HTML：
<div class="class-name">
<img src="images/image-name.png">
</div>
CSS:
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;
}
Change margin-topaccording to your image height.
margin-top根据您的图像高度进行更改。
