ヘッダーを固定して、更にヘッダーの上に文字を表示したい

ヘッダーは固定出来たのですが、ヘッダーの上に文字をうまく表示できません。
どうすれば解決できるか分からない為投稿致しました。
何卒よろしくお願い致します。

HTML
1<HTML>
2<HEAD>
3<meta charset="utf-8" />
4<TITLE></TITLE>
5<link rel="stylesheet" href="../css/style.css" />
6</HEAD>
7
8
9<BODY>
10    <div id="page">
11        <header>
12<!--ヘッダーのオレンジ部分-->
13            <div id="header-fixed">
14            </div>
15
16            <nav class="Navi">
17                <ul>
18                    <li><a href="index.html">商品説明</a></li>
19                    <li><a href="index.html">注文方法</a></li>
20                </ul>
21            </nav>
22           
23        </header>
24</BODY>
25</HTML>
26

css
1/* ヘッダーの固定 */
2div#header-fixed
3{
4    height: 50px; /* 高さ */
5  width: 100%; /* 長さ */
6  background-color: orange;
7  position: fixed; /* ヘッダーを固定(これが重要) */
8  top: 0; /* 固定する位置 */
9  left: 0; /* 固定する位置 */
10  right: 0;  /* 固定する位置 */
11}

行動規範の内容に同意します

回答2件

CSS
1#page {
2    padding-top: 50px;
3}

投稿2018/01/10 14:02

kei344

総合スコア69407

t33

2018/01/10 14:07 編集

ご返信ありがとうございます！私の説明の仕方が悪くて恐縮です。ヘッダー(オレンジ色)の上に文字を置きたかったので、お教え頂いた方法ですと文字は見えるようになるのですが、やりたかったことが出来ませんでした。ですがこのような方法があることを知らなかった為勉強になりました。ありがとうございました！

行動規範の内容に同意します

ベストアンサー

nav次第ですけどz-index:-1;を指定してみては？

css
1div#header-fixed
2{
3    height: 50px; /* 高さ */
4  width: 100%; /* 長さ */
5  background-color: orange;
6  position: fixed; /* ヘッダーを固定(これが重要) */
7  top: 0; /* 固定する位置 */
8  left: 0; /* 固定する位置 */
9  right: 0;  /* 固定する位置 */
10  z-index: -1;  /* 前後関係 */
11}