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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

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

CSS

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

Q&A

解決済

4回答

5589閲覧

z-indexとfloatの浮き

omyu

総合スコア22

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/03/06 08:57

編集2019/03/06 11:23

z-indexを例えば10に指定すると、その要素はfloatと同じく浮いていることになるのでしょうか。
浮いているとしたら、floatと同じようにclearプロパティやclearfixの技法で直すことはできるのでしょうか。
ある要素にposition:fixedとz-index:10を指定すると、その下の要素が上の要素に潜り込み重なってしまいます。下の要素のmargin-topを75pxに指定してレイアウトを整える以外に解決法はあるのでしょうか。

HTML

1<html lang="ja"> 2<head> 3 <meta charset="UTF-8"> 4 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 5 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 6 <title>Document</title> 7 <link rel="stylesheet" href="stylesheet.css"> 8</head> 9<body> 10 <header> 11 <div class="container"> 12 <div class="header-left"> 13 <img src="images/isaralogo.png" alt="isara" class="header-logo"> 14 <p class="h1">バンコクのノマドエンジニア育成講座</p> 15 </div> 16 <div class="header-right"> 17 <a href="#">お問い合わせ / 資料請求はこちら</a> 18 </div> 19 </div> 20 </header> 21 <div id="wrap"> 22 <section class="top"> 23 <p class="text1">プログラミングで</p> 24 <p class="text1">人生の安定を手にいれよう</p> 25 <img src="images/isaralogolarge.png" alt="isara"> 26 <p class="text2">バンコクのノマドエンジニア育成講座</p> 27 <p class="text2">iSara[イサラ]</p> 28 </section> 29 30 </div> 31</body> 32</html>

CSS

1@charset "utf-8"; 2 3* { 4 box-sizing: border-box; 5 text-decoration: none; 6} 7body { 8 margin:0; 9} 10header { 11 height:75px; 12 width:100%; 13 background-color:white; 14 position:fixed; 15 top:0px; 16} 17header:after { 18 content:""; 19 display:block; 20 clear:both; 21} 22.container { 23 width:1170px; 24 height:75px; 25 margin:0 auto; 26} 27.header-left { 28 float:left; 29 width:400px; 30 height:75px; 31} 32.header-logo { 33 margin-top:17px; 34 width:120px; 35 float:left; 36} 37.header-left .h1 { 38 margin: 37px 0 0 0; 39 font-size: 14px; 40 color: #333333; 41 font-weight:600; 42 letter-spacing: 2px; 43} 44.header-right { 45 float:right; 46 width:320px; 47 height:45px; 48 margin-top:15px; 49 background-color: #da6b64; 50 border-radius:25px; 51} 52.header-right a { 53 line-height: 45px; 54 font-weight:300; 55 font-size: 14px; 56 text-align:center; 57 color:white; 58 letter-spacing: 2px; 59 display:block; 60} 61.header-right:hover { 62 background-color:#dc143c; 63} 64#wrap { 65 margin-top:75px; 66} 67.top { 68 width:1170px; 69 margin:0 auto; 70} 71

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

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

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

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

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

Lhankor_Mhy

2019/03/06 11:00

「直すことはできるのでしょうか」とありますが、「直す」とは具体的にはどうすればいいのですか? 問題となっている状態を、なるべく具体的にご提示ください。また、コードもご提示ください。
Lhankor_Mhy

2019/03/06 11:44

「その下の要素が上の要素に潜り込み重なってしまいます」とのことですが、ご希望の対処に近いのは次のうちどれですか? ・fixedを解除する。 ・fixedのままだが、重ならないように下の要素に空白をあける。 ・fixedのままだが、重ならないように要素の下にもぐりこむようにする。
omyu

2019/03/06 12:02

fixedのままで重ならないように下の要素に空白を開けたいです。
Lhankor_Mhy

2019/03/06 12:10

その場合、スクロールしてもfixedの要素は動かないので、余白とfixedの要素がずれますが、それは構わない、ということでしょうか?
omyu

2019/03/06 12:32

余白とfixedの要素がずれるとはどういうことでしょうか。
Lhankor_Mhy

2019/03/06 12:36

ACがstaticのコンテキスト、_が余白、Bがfixedのコンテキストだとして、 A _B C ↓スクロールしてもBは固定されているので、 A _ CB となりますよね?
omyu

2019/03/06 12:50

はい、ずれることは構いません。
Lhankor_Mhy

2019/03/06 12:51

ご提示のコードを拝見しましたが、現状でも重ならないようにmarginで避けている様に見えました。 ご懸念の部分はどういったことですか?
Lhankor_Mhy

2019/03/06 12:52

あ、すみません、margin以外に、ということなのですね。
omyu

2019/03/06 13:01

margin以外でということです。わかりにくくて申し訳ありません。
yoshinavi

2019/03/07 05:10

「ある要素」等、ぼやかした言い方はこの質問の場合、意図をわかりにくくしています。要素名を明示した方が理解しやすいです。
omyu

2019/03/07 07:31

ご指摘ありがとうございます!
guest

回答4

0

質問者さんご自身が記載いただいている通り、
下の要素、ないし、bodyに対して、
fixedを効かせている要素の高さ分、
margin-topかpadding-topをきかせるしかありません。
(といっても、bodyに効かせるのは、CSSの運用上、メンテナンスなどの面から考えやらない方がいい)

paddingかmarginどちらを使うのがいいかに関しては、その時々の状況によって、変わってきます。
今回のケースでは、どちらでもいいと思います。

-------- 以下元回答 --------

なりません。

z-indexは、確かに重なり順を指定するプロパティですが、
最終的に浮かせた状態にするには、
position: absolute、もしくは、position: fixed
も効かせる必要があります。
position: static(初期はこの状態)の場合は、一応重なり順自体は効いていますが、
(一部、position: staticのブロックに重なりが効かない古いブラウザがある)
浮きはしません。
他ブロック同様、下に積み上げられる形で、配置されます。

また、floatと違い、clear: bothなどの技法は必要ありませんが、
position: absoluteの場合、
位置の基準としたい、親要素にposition: relativeを効かせる必要があります。
(これがないと、常にbodyの左上が基準位置となる)
position: fixedの場合は、常に、オンスクリーンの左上が位置の基準となります。

投稿2019/03/06 09:24

編集2019/03/06 11:54
miyabi_takatsuk

総合スコア9528

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

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

omyu

2019/03/06 10:52

ある要素にposition:fixedとz-index:10をしているとその要素の下の要素が潜り込み、要素同士が重なってしまうのですがどういった解決法があるのでしょうか
miyabi_takatsuk

2019/03/06 10:58

質問にそのことを追加しましょう。(こうしたいという部分) とにかく、浮いているを解消したいのであれば、 position: static;を効かせるで大丈夫ですよ。 staticを最優先にしたいのであれば、 position: static !important; とすれば最優先になります。 もし、position: fixed;を適用した上で重ねたくないのであれば、 別の方法を用いなければなりませんので、 そのようにご質問の内容を変えなければ、なりません。 そして、CSSとHTMLの内容も質問内容に記載しなければいけません。 現状の質問は、z-indexとfloatは同等の効果なのか?との内容ととられてしまいます。
omyu

2019/03/06 11:12

わかりました。丁寧なご指摘ありがとうございました。
guest

0

ベストアンサー

margin-top等が嫌ならば、その分の、div(ブロック要素)等を入れるのもひとつの方法です。

投稿2019/03/07 05:27

yoshinavi

総合スコア3521

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

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

omyu

2019/03/07 07:30

なるほど!ありがとうございます!
guest

0

position: sticky;がご希望に合うのではないかと思います。
position: sticky;の仕組みや実際の使い方をやさしく解説 | コリス

投稿2019/03/06 12:55

Lhankor_Mhy

総合スコア35860

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

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

omyu

2019/03/06 13:06

調べてみます、ありがとうございます!
guest

0

結論からいうとz-indexは対象の要素がpositionのabsolute,fixedの時に有効なので、position:staticに戻してあげればいいと思います。

投稿2019/03/06 09:25

sauzar18

総合スコア163

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

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

omyu

2019/03/06 10:48

position:fixedとz-indexを指定している要素にさらにposition:staticを指定するということでしょうか?
sauzar18

2019/03/06 11:23

そうですね。どういったタイミングで変更したいのかわからないのですが、他の要素を上にしたいなら他のfixedのz-indexを大きくすればいいし、スクロールに応じてfixedをstaticにしたいということであれば、js等での操作になるかと
omyu

2019/03/06 11:29

わかりました。ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問