html,css:positionの使用方法

Question

前提・実現したいこと

図は理想の構造です。

page-headerを最上部に固定するために、[ position: fixed; ] を表記し、
section要素"hero"（図:薄赤）を最上部に表示（page-headerの下）するために、
[ position: absolute;
top: 0px; ]　を表記しましたが、
section要素"news"を追加すると、newsも最上部に表示されてしまいます。

section要素"news"が、section要素"hero"の下にくるものだと思っていたのですが、
positionを使用するとこうなるものなのか、positionの使用方法が間違っているのか（またその場合は解決策を）
教えていただきたいです。

発生している問題・エラーメッセージ

section要素"news"が最上部に表示される。
section要素"news"が、section要素"hero"の下にくるようにしたい。

該当のソースコード

◆HTML
<header class="page-header">
<p>page-header</p>
</header>

<section class="hero">
　　<p class="text">text</p>
</section>

<section class="news">
    <p>news<p>
</section>

◆CSS
.page-header {
background: rgba(123, 37, 162, 0.6); /紫/
width: 100%;
height: 15vh;
position: fixed;
z-index: 1;
top: 0;
}

.hero {
background-image: url(../img/1.png); /薄赤/
height: 75vh;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
top: 0px;
}

.text {
background: rgba(255,255,255,0.7);　/薄ピンク/
width: 100%;
margin-top: 45vh;
}

/* news-HOME */
.news {
background: #83c49f; /緑/
height: 90vh;
}

試したこと

sectioin要素"news"にpositionを追記したり、試してみましたが、
解決しませんでしたm(__)m

補足情報（FW/ツールのバージョンなど）

windows10
使用ブラウザ：chrome

Answer 1

position: absolute;を設定すると通常フローから外れます。
他の要素から見えればないものとみなされるので、後ろの要素は上に移動します。

.hero の position: absolute;を削除すれば .news は .hero の下にきます。

Comments

[sa_k]

ご回答ありがとうございます。

ご回答通りに hero の position: absolute;を削除したら解決しました！
top: 0px;だけで最上部に表示されるんですね。
position: absolute;の使い方を間違って覚えてたみたいです…。
もう一度勉強しなおしますm(__)m

とても助かりました。ありがとうございました！

[hatena19]

position: absolute; を削除すると top: 0px; は効いてません。これは削除しても表示に影響はないです。
最上部に表示されるのは、.page-header に position: fixed; を設定しているからです。
fixed も absolute と同様に通常フローから外れるので、他の要素からはないものと扱われます。
よって、.page-header がない状態、つまり最上部に hero が表示されるということです。

[sa_k]

わー、また間違えて覚えてしまうところでした…。
分かりやすい説明ありがとうございますm(__)m！