HTML： "要素が互いに積み重なった"要素

Question

私はHTML & CSSを学んでいます。私はHTML要素の積み重ねを理解することができません。それは私をたくさん混乱させます。 Mozilla CSS Guideのlayoutに行っています。それは次のコードを持っています。

<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 互いの上に積み上げ要素と、ソースコードに表示される正確な順序で表示されます - 最初の段落の後に順序付けされていないリスト が続き、2番目の段落が続きます。

他の部分の積み重ねられた部分がわかりません。彼らはお互いの下に横たわっています。そして、スタックの最下部には追加されません。私は視覚化できません。誰でもこのことを教えてくれますか？ありがとう。

Answer 1

「上」はz軸を指すのではなく、y軸を指します。これは、HTMLに最初に表示される要素が最初にサイトにあることを意味します（上から下まで）。例えば

：

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

が

Hello 
Image 
Hello 2 

Answer 2

これは、表示されている実際のページのHTML要素の流れが、コードに表示されているのとまったく同じ順序で表示されることを意味します。あなたの例では、 "私の愛する猫"は、 "最後"の上にあるulリストの上にあります。