我有一个特殊的问题，我认为很多其他人以前都遇到过，但我不太确定是否有一个好的（纯 CSS）解决方案......
我有一个结构如下的文档：
BOTTOM 本质上是一个背景图像，它应该始终贴在浏览器窗口的右下角。但是，我不想使用 absolute 相对于文档正文的定位，因为那样它会在 MIDDLE 中的文本下流动。
所以基本上我想要与使用绝对定位获得的效果相同的效果，但我不希望文本或其他元素流过它。它的行为应该就像没有任何特定的定位一样，宽度为 100%，高度为 200px，但始终位于文档的右下角。
我很乐意回答有关此问题的任何问题，因为我相信您不会理解这一点。 ;)
【问题讨论】：
这是一个很常见的问题。解决方案：位置：固定。这就是你所说的，确保项目总是出现在某个位置。使用
position: fixed;
bottom: 0px;
right: 0px;
所以总是会出现在右下角。 idk 如果您可以使用背景图像执行此操作，但这符合您的要求。它在 IE 6 中不受支持（但又是什么？）。见here for an example。上下滚动页面。注意图像总是在浏览器窗口的底部。如果你不想让事情流过它，还要确保你的 z-index 足够大。 :D
【讨论】：
<!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>
这既适用于所示的短中间内容，也适用于更详细的中间内容，如 Lorem ipsum。
如果页面高度高于 3*200px+middleContentHeight，您会看到绿色和蓝色块之间出现白色间隙。这很容易通过为 body 声明背景颜色来解决。
【讨论】：
<img src="beta.jpg" class="specialImage" />
.specialImage{
position:fixed;
bottom:0;
right:0;
z-index:100; /* or higher/lower depending on other elements */
}
【讨论】：
如果我理解正确，请使用以下 CSS 将其放在右侧并始终位于底部：
.bottom{
position: relative;
bottom: 0;
float: right;
}
这就是你想要完成的事情吗？
【讨论】：
添加@stevedbrown的答案：
.bottom { z-index: 2; }
其中 2，只是比其他页面元素更高的 z-index
【讨论】：
我只是在文本中嵌入图像。
更具体地说，我使用的是 CKEditor，只是将图像拖到我想要的位置。然后，我查看了源代码，发现图像标签被简单地移动到了 div 元素中的某个明显任意位置。
<div>Lorem ipsum dolor sit <img src="sunset.jpg" style="position:relative;float:right; padding:3px;" />per seacula futurum.</div>
我意识到这在数学上并不精确。但希望这个解决方案至少为其他答案提供了另一个视角——（我无法为我工作）。 CSS中似乎没有任何东西可以将元素推到para的“底部，右侧”，同时让文本环绕。
【讨论】：