如何将内容放置在固定图像下方？

Question

JSFiddle：

http://jsfiddle.net/qd8Ltufw/6/

我有一个页面，上面有背景图片，内容居中。 一切正常，我已经按照需要设置了它，但是现在我需要在图像下方添加内容。

图片的CSS：

img.home-bg {
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
  margin-top: 100px;
}

您可以从小提琴中看到，当我在带有图片的div以下添加任何内容时，该图片不会显示在图片下方。 它显示在其上方或下方。 我需要能够将内容放置在用户可以向下滚动查看的图像下方。

Answer 1

抱歉，由于回复率低，我无法在您的帖子下发帖。

请查看此链接并告诉我您的想法，这是否回答了您的问题？ 码

$(document).ready(function(){
    $(".home-callout").css("margin-top",$(".home-bg").height()+200);
});

另外，请注意，当您使用这样的背景时，您正在固定图像，并且整个内容永远不会低于图像本身。 请参见CSS代码，其中最小高度：100％；

Answer 2

当您将某物设置为position: fixed它会将其从文档流中移出。 因此，其他元素将不在乎页面在页面上的位置，并且这些其他元素也不会相对于页面定位自己。 这就是为什么您的文本仅显示在顶部的原因。 因为图像是固定的。

我将删除将图像设置为fixed的CSS。

CSS：

img.home-bg {
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  margin-top: 100px;
}

小提琴： http : //jsfiddle.net/qd8Ltufw/8/

如果您确实要固定图像并在内容上滚动，则可以以某种方式定位内容，也可以设置其边距。 或者，您可以使用javascript获取图像高度并动态设置内容位置。

小提琴： http : //jsfiddle.net/qd8Ltufw/10/