CSS:页面底部的位置元素而不是窗口

时间:2011-12-28 14:36:53

标签: html css css-position

最简单的HTML:

<!doctype html>
<html>
<body>
<p>Some text content</p>
<p>Some more content</p>
<p> ... </p>

<img src="image.jpg">
</body>
</html>

图片的目的是通过CSS在位于段落后面的页面的底部进行定位。

这是一个实例。

http://jsfiddle.net/g105b/NfzT3/

3 个答案:

答案 0 :(得分:3)

加水。这个:

body { position:relative }

图像相对于围绕它的下一个最佳位置(非静态)元素定位。

答案 1 :(得分:1)

嗯..在文本背后..我认为通过身体的CSS比上面的解决方案更好 - 通用CSS:

<style type="text/css">
body {
background:url(image.jpg) no-repeat bottom center;
}
</style>

如果你想修复它:

<style type="text/css">
body {
background:url(image.jpg) no-repeat bottom center fixed;
}
</style>

答案 2 :(得分:0)

你的意思是Like this??那么图像是否与文本保持在一起而不是触及窗口的底部?

我不明白重复的downvotes。问题清楚地表明“页面底部而不是窗口”这是唯一不会将图像对齐到窗口底部的解决方案。