2017-04-21 126 views
0

我正在学习HTML & CSS。我无法理解HTML元素的堆叠。它令我困惑不已。我正在通过Mozilla CSS Guide中的layout。它有以下一段代码。HTML:什么是“元素堆叠在一起”

<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被显示在其 出现在源代码,对一个 彼此的顶部堆叠元件的确切顺序 - 第一段,然后是无序列表, 后面跟着第二段。

我不明白另一个部分的堆叠顶部。它们在彼此之下。它们被添加到堆栈的底部而不是顶部。我无法想象。任何人都可以帮助我吗?谢谢。

+1

如果你看屏幕时,UL是上的“结束”和“我爱我的猫”顶部之上的UL - 这不是一个很好的描述我同意 – mplungjan

回答

1

“在上面”并不是指z-,而是指的是Y轴。这仅仅意味着首先出现在HTML中的元素也将首先出现在网站上(从上到下)。

例如:

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

将呈现

Hello 
Image 
Hello 2 
+0

啊!是令我困惑的轴部分。非常感谢你。 :) –

0

这意味着您看到的实际页面中的HTML元素流将以与代码中显示的顺序完全相同的顺序显示。在你的例子中,“我爱我的猫”在ul列表之上,它位于“最终”之上。