html - 堆叠 标签内容

Question

我有 2 个带文本的 paragrpahs 标签，并且都有宽度限制。我有宽度限制，因为我希望它们在调整浏览器宽度时堆叠。

  <p class="text"> Line 1. Big text. </p>
  <p class="small-text">Line 2. Small text. </p>

我现在面临的问题是第一行堆栈与第二行重叠，反之亦然。我试着把它放在一个 div 中，但它没有帮助。这两行都是不同的字体样式。所以，我不能将它们放在同一个 p 标签中。

JSfiddle 链接:http://jsfiddle.net/1rxpmx4g/1/

非常感谢任何帮助。

Answer 1

您将受益于更好地理解绝对 和相对 定位。

非常简单，absolute 将元素从 HTML 流中取出，并将其粘贴在当前 div 的左上角。 (这有点太简单了。请参阅第一篇引用的文章以获得出色的解释——但目前这基本上是正确的。)

relative 从元素在流中的正常位置开始，但允许您将元素重新定位到元素开始位置的上/下左/右位置。

float:left 和 float:right 将元素从正常流中取出，但将其留在左边距。

进一步阅读:

http://www.webdevbydoing.com/css/whats-the-difference-between-static-relative-absolute-and-fixed-positioning/

http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/