質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTTPヘッダー

Hypertext Transfer Protocol(HTTP)の中のHTTPヘッダフィールドはHTTPの要求やレスポンスの機能しているパラメーターが含まれます。その要求もしくはレスポンスライン(メッセージの最初の一行)でメッセージヘッダを作ります。

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

文字コード

文字コードとは、文字や記号をコンピュータ上で使用するために用いられるバイト表現を指します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

3328閲覧

ヘッダーを固定してスクロールしたら他の要素と重なってしまう。

cafe1111

総合スコア62

HTTPヘッダー

Hypertext Transfer Protocol(HTTP)の中のHTTPヘッダフィールドはHTTPの要求やレスポンスの機能しているパラメーターが含まれます。その要求もしくはレスポンスライン(メッセージの最初の一行)でメッセージヘッダを作ります。

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

文字コード

文字コードとは、文字や記号をコンピュータ上で使用するために用いられるバイト表現を指します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1グッド

1クリップ

投稿2020/03/12 08:46

前提・実現したいこと

模写コーディングをしています。
ヘッダーを固定したところエラーが発生しました。

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

ヘッダーを固定しz-indexを指定してスクロールしたら一部は反映されたが、一部は反映されずほかの要素と重なってしまう。

該当のソースコード

html

1<div class="page-header__inner"> 2 <div class="page-header__logo"> 3 <img src="C:\Users\" alt=""> 4 <p>ユアコーディング</p> 5 </div> 6 <nav class="page-header__nav"> 7 <ul class="page-header__list"> 8 <li class="page-header__block"><a href="#">特徴</a></li> 9 <li class="page-header__block"><a href="#">価格</a></li> 10 <li class="page-header__block"><a href="#">お問い合わせ</a></li> 11 </ul> 12 <p class="page-header__form"><a href="#">お問い合わせ</a></p> 13 14 </nav> 15 16 </div>

css

1.common-inner{ 2 margin: 0 auto; 3 background-color: #ffffff; 4 padding: 70px 0; 5} 6 7.page-header{ 8 background-color: #ffffff; 9} 10 11.page-header__inner{ 12 display: flex; 13 align-items: center; 14 justify-content: space-between; 15 box-shadow:0 2px 4px gray ; 16 height: 94px; 17 position: fixed; 18 top: 0; 19 left: 0; 20 z-index: 10; 21 width: 100%; 22} 23 24.page-header__logo{ 25 display:flex; 26 padding-left: 190px; 27 28 29} 30 31.page-header__logo img{ 32 height: 47px; 33 width: 47px; 34 35 36} 37 38.page-header__logo p{ 39 font-size: 24px; 40 color: #333333; 41 padding-left: 20px; 42 padding-top: 3px; 43 44} 45 46 47 48 49 50.page-header__nav{ 51 display: flex; 52 align-items: center; 53} 54 55.page-header__list{ 56 display: flex; 57 padding-right: 50px; 58 59 60 61} 62 63.page-header__block:not(:last-child){ 64 margin-right: 42px; 65 66} 67 68 69 70.page-header__block a{ 71 font-size: 16px; 72 color: #333333; 73 font-family: ヒラギノ角ゴ ProN,W6; 74} 75 76.page-header__block a:hover{ 77 text-decoration: underline; 78} 79 80.page-header__form{ 81 padding-right: 193px; 82 83} 84 85.page-header__form a{ 86 font-size: 14px; 87 color: #ffffff; 88 display: inline-block; 89 background: linear-gradient(90deg, #FA41CC 0%, #6020B0 100%) 0% 0% no-repeat padding-box; 90 margin-left: 100px; 91 border-radius:10px ; 92 padding: 5px 15px; 93 94}

試したこと

z-indexの調整など試してみたが駄目だった。

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

なし

s.k👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

あまり適切でも正確とも言えない説明になりますが、
z-indexは、より先祖にあたる要素に適用することで、思った挙動になることがあります。
取り出されたコードから全体を推し量ることはできないのですが、見える範囲での回答をするなら、

CSS

1.page-header{ 2 background-color: #ffffff; 3} 4 5.page-header__inner{ 6 display: flex; 7 align-items: center; 8 justify-content: space-between; 9 box-shadow:0 2px 4px gray ; 10 height: 94px; 11 position: fixed; 12 top: 0; 13 left: 0; 14 z-index: 10; 15 width: 100%; 16}

となっている部分を

CSS

1.page-header{ 2 background-color: #ffffff; 3 box-shadow:0 2px 4px gray ; 4 height: 94px; 5 position: fixed; 6 top: 0; 7 left: 0; 8 z-index: 10; 9 width: 100%; 10} 11 12.page-header__inner{ 13 display: flex; 14 align-items: center; 15 justify-content: space-between; 16}

こう書き換えてみてはいかがでしょうか?

より詳しい情報はこちらを参考に。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index

投稿2020/03/13 06:20

marlboro_tata

総合スコア525

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問