ｈｔｍｌ、ナビゲーションバーの優先表示について
ｈｔｍｌでナビゲーションバーを作っている者ですが、
一部の画像や文字の奥に表示されてしまいます。
リスト１～３と書いてある白いｎａｖを全て手前に映したいです。
ｃｓｓのコード
header {
/*ナビゲーションバー*/
nav {
position: fixed;
text-align: center;
top: 1px;
width: 100%;
left: -20px;
background:#fff;
border: 1px solid #eee;
box-shadow:0 0 5px #ddd;
padding: 10px;
}
ul {
list-style-type: none;
z-index: 100;
margin: 0;
padding: 0;
}
ul li {
display: inline-block;
width: 100px;
}
ul li a {
text-decoration: none;
color: #333;
}
nav ul li a:hover {
color: orange;
}
}
/*ｈ１の文章*/
h1 {
position: relative;
top: 50px;
left: 80px;
z-index: 1;
padding: 0;
margin: 5px;
font-size: 30px;
color: black;
}
htmlは以下の通り
<header>
<nav class = "nav">
<ul class = "ul">
<li><a href = "file:省略///">リスト１</a></li>
<li><a href = "file:省略///">リスト２</a></li>
<li><a href = "file:省略///">リスト３</a></li>
</ul>
</nav>
</header>
<h1>ｈ１の文章</h1>
それでz-indexを追加して表示優先度をこのようにしました。
リストもheader内に入れて他と混同しないよう独立させています。
が、どういうわけかpositionのところでひっかかって上手くできません。
調べによるとrelativeは最優先手前表示となっているらしく、他に変えようと
static,absolute,fixedに変えたら今度は他のレイアウトがグチャグチャになります。
static,absoluteだとまったく文字や画像の調整が効かなくなり、
fixedだと文字もついてきてしまいます。
どうしてもリストバーをfixedにしなければスクロールできません。
ｈ１をrelative以外で画像や位置を変えられればできそうなんですが、
こういった場合はどこを変えれば良いんでしょうか？
御教授お願いします。
0
