HTML: "elements stacked up on top of one another"是什么

Question

我正在学习 HTML 和 CSS。我无法理解 HTML 元素的堆叠。这让我很困惑。我正在浏览 layout来自 Mozilla CSS 指南。它有以下一段代码。

<p>I love my cat.</p>

<ul>
  <li>Buy cat food</li>
  <li>Exercise</li>
  <li>Cheer up friend</li>
</ul>

<p>The end!</p>

它说:

HTML is displayed in the exact order in which it appears in the source code, with elements stacked up on top of one another — the first paragraph, followed by the unordered list, followed by the second paragraph.

我不明白另一部分的堆叠顶部。他们躺在彼此下面。它们被添加到堆栈的底部而不是顶部。我无法想象。谁能帮我解决这个问题？谢谢。

Answer 1

“在顶部”在这里不是指 z 轴而是指 y 轴。这只是意味着最先出现在 HTML 中的元素也将最先出现在网站上(从上到下)。

例如:

<div>Hello</div>
<img alt="Random image" src="..."></img>
<div>Hello 2</div>

将呈现

Hello
Image
Hello 2