如何在响应式布局中将元素放置在背景图像上

Question

- ＆gt; 我的目标是将文字放在图片背景上，并在重新调整浏览器窗口大小时将其移到背景中（但防止文字越过图片的边缘） ）。我不想将文字保留在图像下方。

问题： 我正在关注this教程，以了解响应式设计。完成本教程后，我设定了将所有文本移到图像顶部的目标。基本上我想使用红色图像作为<section>和<aside>标签中所有内容的背景（它只是文本，但我想它也适用于表单等）。

我的方法是将这两个标签包装在另一个<div id="content">中（仍在<div id="wrapper">下），然后在 CSS 中将其设置为position:absolute;。这个wouls与图像上的文本重叠，但是当我重新调整窗口大小时，文本会溢出背景。它不受父div（包装器？）的约束。我认为它将保留在包装器div 中，因为我认为它应该是它的父级。

它也会浮动，并且与图像或图像所在的div完全断开。

问题： 所以我的问题是我该怎么做呢（让它保持响应）？

代码： 这是在jsfiddle： this is the original code和 this is what I tried to do（尝试调整窗口大小......它看起来并不好看）

示例： * P.S。 *为了更好地理解我想要实现的目标，请查看this page，您可以在其中看到文本在可以重新调整大小的背景上保持其位置和比例。 （尝试重新调整浏览器窗口的大小）

Answer 1

在你的jsfiddle css中删除position: fixed;

 #content{
       width: 75%;
       position: fixed;
       /*Remove this line from CSS  (Line number 40 in jsfiddle CSS of your code)*/
       padding: 1%;
       padding-top: 30%;
    }