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

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

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

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

Q&A

1回答

1344閲覧

z-indexの影響は親にもあるのか?

退会済みユーザー

退会済みユーザー

総合スコア0

CSS

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

0グッド

0クリップ

投稿2018/09/29 20:33

編集2018/09/30 07:37

こういうソースをかきました
https://codepen.io/anon/pen/gBbejQ

  1. これでbox3クラスのdivタグにホバーすると

box2クラスのdivタグが表示されたままになります
これはなんでですか?z-indexを設定してないと全部zindex:autoになって、上から順に重ねられるからですか?

  1. box3クラスのdivタグにzindex:1をつけると

box2クラスのdivタグが表示されなくなります
これはなんでですか?
スタックレベルがbox1とbox2は同じです。違うのはbox3クラスのzindex:1だけです。
この状態だとどうやっても後に書かれたbox2のほうがスタックレベルが大きいからbox2がずっと最善麺に表示されるんじゃないですか?
納得できません

ソースコード

html

1<div class="box1"> 2 <div class="box3"></div> 3 <div class="box5"></div> 4</div> 5<div class="box2"> 6 <div class="box4"></div> 7 <div class="box6"></div> 8</div>

css

1div { 2 width: 250px; 3 height: 250px; 4} 5 6.box1 { 7 background: #ffa; 8 position: relative; 9} 10 11.box2 { 12 background: #faf; 13 position: relative; 14} 15.box3, 16.box4 { 17 opacity: 0; 18 background: green; 19} 20.box1:hover .box3, 21.box2:hover .box4 { 22 opacity: 1; 23} 24 25.box5, 26.box6 { 27 display: none; 28} 29 30.box4:hover, 31.box3:hover { 32 display: block; 33 position: fixed; 34 top: 0; 35 left: 0; 36 width: 100%; 37 height: 100%; 38 background: #aff; 39}

これを読みました
https://app.codegrid.net/entry/z-index-1

この結果がどうしても理解できません

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

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

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

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

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

guest

回答1

0

解決ずみにしちゃいますが、何か間違えてたら、コメントでいってほしいです

解決したかもです

1.https://w3g.jp/css/display_position/z-index

ここにかいてありました

z-indexプロパティの指定がない場合、及び** z-indexプロパティに "auto" が指定されている場合の位置指定されている要素の重なり方は、文書のソース内であとに記述されている要素ほど上に重ねられて前面に表示されることにな**ります。

2.http://okakacacao.wpblog.jp/technology/zindex-and-stacking-context#z-index-3

ここにかいてあったです

  1. ルート要素
0. position 指定され、z-index に負の値が指定されている要素 子孫ブロック要素 0. float 指定された子孫要素 0. 子孫インライン要素
  1. position 指定され、z-index に auto または 0 が指定されている要素
  2. position 指定され、z-index に正の値が指定されている要素

って書いてあって

box3クラスにzindex:1をかけてやると
このbox3クラスいがいのdivタグは__z-index に auto または 0 が指定されている要素__にな

それで、box3クラスはposition 指定され、z-index に正の値が指定されている要素にnある

つまりこれは積み重なり順序が原因だった!

### 結果的に、box3クラスいがいのdivタグが表示されたあとにbox3クラスが表示されることになる

投稿2018/09/29 20:48

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

退会済みユーザー

退会済みユーザー

2018/09/29 20:55

解決ずみから未解決にもどして回答をまつことにしました 不安なので
退会済みユーザー

退会済みユーザー

2018/09/29 21:06

box3クラスのスタックコンテキストではz-index:1だけど、 これはbox2クラスのスタックコンテキストに関係あるのかがまたわからなくなってきました
m.ts10806

2018/09/29 21:41

確か少し前の質問にも回答した内容に近い案件かと思いますが、 おおよそ間違いないのではないかと思います。 リファレンスも確認されているようですし、仕様確認もされていますし。 あとはケースバイケースなところもあるので、理論だけを追うのではなく、様々なレイアウトを組んでみて検証を進めていってはどうでしょうか。
m.ts10806

2018/09/30 02:07

ついでなので気を付けていただきたいことですが、コードは外部サービスだけでなく必ず本文にも添付してください。 何かでその外部サービスがアクセスできなくなったときに重要な要素であるコードが確認できなくなるのはマイナス要素にしかなりませんし。 長くて入らないのであれば要約したものでも良いです
退会済みユーザー

退会済みユーザー

2018/09/30 07:29

以前にも同じ質問があったのですか。もし教えて頂けるならぜひとも読みたいのですが・・・ 調べてみると~スタックレベルが兄弟意外に影響を及ぼずことはないはず~なのですが、質問にかいたソースでは~兄弟以外のタグにスタックレベルが影響を与えていると思います~ 例 :box3にzindex:1をつけてbox3をホバーしたらbox3の兄弟要素じゃないbox2がしたに埋もれる。box3からzindexをとるとbox2は上に浮き上がる(質問リンクのコードを編集して試していただけばわかりやすいかと) この問題に関して、なにかお気づきになった点はございませんか・・・? コードの本文への添付について、編集しました リンク先、本文のソースどちらもこれ以上削れないところまで削っておりますが、もともと複雑なソースだったため、若干のむだがあるかもしれないです
m.ts10806

2018/09/30 07:33

まったく同じというわけではないですが、z-indexに関する挙動の質問です。 https://teratail.com/questions/146201 私が回答していますがCSSリファレンスを参考リンクに根拠を述べているだけですけどね^^; >コードの本文への添付について、編集しました たぶんリンクミスってますね。リンクURLの()の先頭にスペースが入ってしまっています。
退会済みユーザー

退会済みユーザー

2018/09/30 07:41

リンクを掲載して頂きありがとうございます zindex:autoについて、「親要素と同じ階層」の状態がよくわかりませんでしたが、リンク先記事の回答で引用しているCSSリファレンスでは「初期状態では全要素がz-index:auto(整数値では"0")」とかいてあることから、auto=0と考えてしまっていいということですね。とても参考になります codegridのページへのリンクのことですね、リンクミス修正しました ご指摘ありがとうございます
yoshinavi

2018/10/02 07:14

>解決ずみから未解決にもどして回答をまつことにしました・・・  他の回答は待たず「ベストアンサー」で閉めても良いと思います。 「mts10806」さんのコメントにもありますが、挙動は充分理解されていると、私も思います。 実際に「z-index」を使う場合、指定が無いのは「0」で考えて良いと私は思います。親が基準になるし、親の記述位置もレイアウトでは考慮するからです。 前後等の兄弟要素との兼ね合いも考慮して、大きい数字「100」「200」と100単位で付けたり、極端に大きい数字を設定したりする場合もあります。 (^^)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問