🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
HTML

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

CSS

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

Q&A

2回答

288閲覧

z-index効かない

watanabe0328

総合スコア4

HTML

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

CSS

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

0グッド

2クリップ

投稿2019/11/13 03:06

編集2019/11/13 03:09

前提・実現したいこと

学校の課題でhtmlとcssでWEBページを作っています。ヘッダーで固定はできたのですがスクロールするとヘッダーが画像や文字の下にいってしまいネットで調べたところ、z-indexを使うと重なり順が変えられると書いてあって試したのですがうまくできません。まだ初心者なのでプログラミングの書き方がやや汚いですが、温かい目でみてくれるとうれしいです。
※htmlとcssの分け方がわからなかったので一緒に書いてあります。

該当のソースコード

HTML <body> <div id="header-fixed"> <div id="header"> <div class="boxA"> <div class="box1"> <html> <img src="image/rogo.png" width="250" height="125" alt=""> </div><!--box1閉じ--> <div class="box2"> <nav class="menu"> <ul> <li><a href="#" class="btn-square">TOP</a></li> <li><a href="#" class="btn-square2">診断</a></li> </ul> </nav> </div><!--box2閉じ--> </div><!--boxA閉じ--> </div><!--header閉じ--> </div><!--headerfixed--> <div class="box3"> <div class="slider"> <img src="image/hand.png" width="500" height="500" alt=""> <img src="image/ito.png" width="500" height="500" alt=""> <img src="image/joi.png" width="500" height="500" alt=""> <img src="image/nae.png" width="500" height="500" alt=""> </div> </div><!--box3閉じ--> CSS @charset "UTF-8"; .boxA:after {content:""; display: block; clear: both; z-index:100; position: relative} div#header-fixed{ position: fixed; /* ヘッダーの固定 */ top: 0px; /* 位置(上0px) */ left: 0px; /* 位置(右0px) */ width: 100%; /* 横幅100% */ height: 140px; /* 縦幅140px */ } .box1 {float:left; width:50%; z-index:90} .box2 {float:left; width:50%; z-index:80} .box3 {z-index:50; top:150px} .box4 {z-index:40} .box5 {z-index:30; top:150px}

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

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

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

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

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

kyoya0819

2019/11/13 03:09

アカウントもう一個作ったんですね、 どうせ「卒論に使う」んですよね?
watanabe0328

2019/11/13 03:17

皆さんすごいですね。まさか一瞬でばれるとは思いませんでした笑 禁止事項と知らなかったので止めますね。注意ありがとうございました。
kyoya0819

2019/11/13 03:18

こんな汚いコード見せられたらわかります。
miyabi_takatsuk

2019/11/13 03:37 編集

質問を修正してほしいとは言いましたが、 新たな質問を立てて、とは誰も言ってないです・・・。 しかも別アカ立てちゃったなら、質悪くさえ見えてしまいます。 質問は、編集が可能なので、元の質問を修正しましょう。
watanabe0328

2019/11/13 03:36

miyabi_takatsukさんのせいではありません。私のせいです。
miyabi_takatsuk

2019/11/13 03:53

わかりました。 それで、元の質問でコメントいたしましたが、学校の先生には質問したのでしょうか? それとも何か学校の先生に聞けない理由があるのでしょうか??
m.ts10806

2019/11/13 03:57

いやその前にサイト規約違反への言及ですよ。 平気でルールを破る人をフォローする義理は誰にもありません。むしろ糾弾されて然るべき
miyabi_takatsuk

2019/11/13 04:00

> m.ts10806さん 毎度すみません。その通りですね・・・。 控えます。
azuapricot

2019/11/13 04:01

マナーがなってないのできっと常識がない方なのでしょう。 そりゃ締め切り間近になって焦るのも当然ですね。 もう1年頑張ってください
mutsuki22

2019/11/13 04:55 編集

前の質問でも間接的に少し触れましたが大前提として、これでコード全部ですか? いくつか回答がして下さっている方法でも解決出来ないようですし、他の部分が影響している可能性もありそうですが・・・
guest

回答2

0

HTMLの構文がめちゃくちゃな時点でz-index云々の話をすべきではありません。
卒論に使うんだか知りませんが確実に落ちますよ

投稿2019/11/13 03:12

kyoya0819

総合スコア10429

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

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

watanabe0328

2019/11/13 03:35

卒業研究なので落ちるとかはないんですけど11月末までにはある程度完成させないといけないくてですねどうか慈悲をください。お願いします。もうあなたしか頼れません!!
kyoya0819

2019/11/13 03:54 編集

CPしても問題が再現しませんでした。 よって、あなたの環境に何かしらの問題があると言う結論になります。 以上。
kyoya0819

2019/11/13 13:10

すみません表現間違えていました。 「確実に落ちます」
guest

0

「#header-fixed」が透明だから下にあるように感じるだけでは?
background-Colorを適当に指定してはどうでしょうか?

投稿2019/11/13 03:14

編集2019/11/13 03:15
yambejp

総合スコア116663

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

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

watanabe0328

2019/11/13 03:36

background-Colorで色指定したのですが反映されませんでした。どうすればよいですか?
watanabe0328

2019/11/13 03:39

色付きましたが駄目でした
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問