Html CSS：图像粘在文档的右下角
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1070917/
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
CSS: Image sticking to the bottom right hand side of the document
提问by Deniz Dogan
I have a peculiar problem, which I think that a lot of other people have had before, but I'm not so sure there is a good (pure CSS) solution to it...
我有一个特殊的问题，我认为很多其他人以前都遇到过，但我不确定是否有一个好的（纯 CSS）解决方案......
I have a document with the following structure:
我有一个具有以下结构的文档：
- TOP: 100% wide, 200px high
- MIDDLE: 100% wide, variable height
- BOTTOM: 100% wide, 200px high
- 顶部：100% 宽，200px 高
- 中间：100% 宽，高度可变
- 底部：100% 宽，200px 高
BOTTOM is essentially a background image which should stick to the bottom right hand side corner of the browser window at all times. However, I don't want to use absolutepositioning relative to the body of the document, because then it will flow under the text which is in MIDDLE.
BOTTOM本质上是一个背景图像，应坚持到浏览器窗口的底部右侧角球在所有时间。但是，我不想使用absolute相对于文档正文的定位，因为那样它会在 MIDDLE 中的文本下方流动。
So basically I want the same effect as the one I would get using absolute positioning, but I don't want text or other elements to sort of flow over it. It should behave just as if it didn't have any particular positioning, with width 100% and height 200px, but always in the bottom right hand side of the document.
所以基本上我想要与使用绝对定位获得的效果相同的效果，但我不希望文本或其他元素在它上面流动。它应该表现得好像它没有任何特定的定位，宽度为 100%，高度为 200px，但始终位于文档的右下角。
I'll be glad to answer any questions about this problem, as I'm sure you won't understand this. ;)
我很乐意回答有关此问题的任何问题，因为我相信您不会理解这一点。;)
采纳答案by dlamblin
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>test bottom right fixture</title>
</head>
<style type="text/css">
body{margin: 0;}
#top,#middle,#bottom{width:100%;}
#top,#bottom{height:200px;}
#middle{padding-bottom: 200px;}
#bottom{position: fixed;right:0;bottom:0;}
.red{background-color: red;}
.green{background-color: green;}
.blue{background-color: blue;}
</style>
<body>
<div id="top" class="red">
Lorem ipsum dolor sit amet
</div>
<div id="middle" class="green">
Lorem ipsum dolor sit amet
</div>
<div id="bottom" class="blue">
Lorem ipsum dolor sit amet
</div>
</body>
</html>
This works with both short middle content as shown, or more verbose middle content like: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
这适用于所示的短中间内容，或更详细的中间内容，例如：Lorem ipsum dolor sat amet、consectetur adipisicing elit、sed do eiusmod tempor incididunt ut laboure et dolore magna aliqua。Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat。Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。例外 sint occaecat cupidatat non proident, 在 culpa qui offcia deserunt mollit anim id est labourum 中被禁止。Lorem ipsum dolor sat amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut laboure et dolore magna aliqua。Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat。Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。例外 sint occaecat cupidatat non proident, 在 culpa qui offcia deserunt mollit anim id est labourum 中被禁止。
There is an issue where if the page height is higher than 3*200px+middleContentHeight you will see a white gap between the green and blue blocks. This is easily fixed by declaring a background-color for body.
存在一个问题，如果页面高度高于 3*200px+middleContentHeight，您将看到绿色和蓝色块之间的白色间隙。这很容易通过为 body 声明背景颜色来解决。
回答by Gordon Gustafson
This is a very common issue. solution: position: fixed. This does what you said, makes sure the item ALWAYS appears in a certain position. Use
这是一个很常见的问题。解决方法：位置：固定。这就是您所说的，确保该项目始终出现在某个位置。用
position: fixed;
bottom: 0px;
right: 0px;
So the will always appear in the bottom right. idk if you can do this with a background image, but this meets your requirements. its not supported in IE 6 (but then again, what is?). see here for an example. scroll up and down the page. Notice how the image is always in at the bottom of the browser window. Also make sure your z-index is adequately large if you don't want things to flow over it. :D
所以 总是会出现在右下角。idk 是否可以使用背景图像执行此操作，但这符合您的要求。它在 IE 6 中不受支持（但话说回来，什么是？）。请参见此处的示例。上下滚动页面。请注意图像如何始终位于浏览器窗口的底部。如果您不想让东西流过它，还要确保您的 z-index 足够大。:D
回答by Sampson
<img src="beta.jpg" class="specialImage" />
.specialImage{
position:fixed;
bottom:0;
right:0;
z-index:100; /* or higher/lower depending on other elements */
}
回答by Peter
If I understand you correctly, use the following CSS to get it in the right hand side and always at the bottom:
如果我理解正确，请使用以下 CSS 将其放在右侧并始终位于底部：
.bottom{
position: relative;
bottom: 0;
float: right;
}
Is that what what you're trying to accomplish?
这就是你想要完成的吗？
回答by casademora
To add to the answer by @stevedbrown:
要添加@stevedbrown的答案：
.bottom { z-index: 2; }
where 2, is just a higher z-index than the other page elements
其中 2, 只是比其他页面元素更高的 z-index
回答by Net Dawg
I just played around with embedding the image within the text.
我只是在文本中嵌入图像。
More specifically, I was using the CKEditor and just dragged the image to where I wanted it to be. Then, I looked at the source to find the image tag was simply moved to some apparently arbitrary location within the div element.
更具体地说，我正在使用 CKEditor 并将图像拖到我想要的位置。然后，我查看了源代码，发现图像标签被简单地移动到了 div 元素中某个明显任意的位置。
<div>Lorem ipsum dolor sit <img src="sunset.jpg" style="position:relative;float:right; padding:3px;" />per seacula futurum.</div>
I realize this is not mathematically precise. But hopefully this solution provides another perspective, at least, to the other answers - (which I could not get to work for me). There seems to be nothing in CSS that pushes an element to "bottom, right" of a para while having text wrap around.
我意识到这在数学上并不精确。但希望这个解决方案至少为其他答案提供了另一种视角 - （我无法为我工作）。CSS 中似乎没有什么东西可以在文本环绕的同时将元素推到段落的“底部，右侧”。
