ホバー、Z-インデックスおよびレイヤリング...複雑な混乱？

私はウェブ開発者のnoobであり、より多くの経験を持つ方が助けてくれることを願っています。ホバー、Z-インデックスおよびレイヤリング...複雑な混乱？

<div id="domain-background-container"> 
    <div class="domain-hotspots"> 
    <div id="hotspot"> 
     <p class="bubble">I'm red on hover</p> 
    </div> 
    </div> 
</div> 

<div id="page-nav" > 
    <p>I'm red on hover</p> 
</div>

html, body {  /* <--- (1) */ 
    height: 100%; } 

#domain-background-container { 
    position: fixed; 
    z-index: -10; } /* <--- (2) */ 

.domain-hotspots { 
    width: 100vw; 
    height: 100vh; 
    position: fixed; 
    background: blue; } 

    #hotspot { 
    width: 2em; 
    height: 2em; 
    background: green; } 

    #hotspot:hover .bubble { 
    background: red; } 

#page-nav { 
    width: 100%; 
    text-align: center; 
    background: yellow; } 

#page-nav:hover p { 
    color: red; }

ここjsfiddleです。

#hotspot（緑色の四角形）は、マウスカーソルをマウスの上に置いたときにホバー状態に入りません。私は、4つのものを持っているよ

は、次のように説明し

は、誰かが提供したり、ホバー状態に入るのを防ぐ#hotspot力学の詳細な説明に私を指すことができますか？
CSSルールセット（1）を削除すると、#hotspotがホバー状態に入ることができます（1）[height：100％html and body]。これは私のプロジェクトで実行可能な解決策ではありませんが、好奇心のために、なぜこれが違いを生み出しますか？
CSSルールセット（2）のz-インデックスを削除すると、#hotspotがホバー状態になることもできます。残念なことに、これはまた、z-orderingを.domain-hotspots（青色）として扱い、＃page-nav（黄色）をカバーしています。理論的には#page-navのz値を位置付けて上げることができました。これは単純なjsfiddleではうまくいくものですが、ドメインホットスポットに続くすべての要素にそれを適用しなければならないより大きなプロジェクトではそうは嫌です（これは必要ではありません。後で変更されるZ-インデックスは、htmlファイルの.domain-hotspotsをビューポートの.domain-hotspotsの上にレンダリングする必要があります）： -/
私は今述べた2つの "ソリューション"を使用できません解決策は残っている？

私は本当に人々がこれに共有することができます感謝しています！私は困惑している。私はこの問題の原因を知ることができないので、私はこの問題を研究するために私が何をgoogleすべきかも分かりません。あなたはbodyタグにしていない#hotspotタグに置くようz-index: -10から#domain-background-containerを設定することにより

出典

2016-09-25 assailant

誰かが提供したり、ホバー状態に入るのを防ぐ#hotspot力学の詳細な説明に私を指すことができますか？

<body>がそれをカバーしています。
これは、ブラウザの開発ツールの「要素の検査」機能を使用すると分かります。（。方法はz-indexのdivの前にその背景を入れていませんそれをbackgroundを与え、しかし作品のために）

削除CSSのルールセットは、（1）[高さ：htmlと体のための100％]ができます#hotspotを入力してホバー状態にします。これは私のプロジェクトで実行可能な解決策ではありませんが、好奇心のために、なぜこれが違いを生み出しますか？ height: 100%で

：

height: 100%なし：

[...] .domainを辿る無修正のzインデックスを持つ私の理解要素にhtmlファイルの-hotspotsはの上にレンダリングする必要がありますビューポート内の。 CSS Level 2 draftから

、9.9.1条：

背景との境界：

各スタッキングコンテクスト内で、以下の層は、バック・ツー・フロントために描かれていますスタッキングコンテキストを形成する要素
負のスタックレベルを持つ子スタッキングコンテキスト（負のものが最も多い）。
インラインで、インラインでないレベルの、配置されていない子孫。
位置付けされていない浮動小数点。
インライン・テーブルとインライン・ブロックを含む、インライン・レベルの非配置の子孫です。
スタックレベル0の子スタッキングコンテキストと、スタックレベル0の配置済み子孫コンテキスト。
正のスタックレベルの子スタッキングコンテキスト。

#page-nav何らかの<div>上のデフォルトdisplay: blockにカテゴリ3です。
#domain-background-containerはposition: fixedのためカテゴリ2です。フローから削除して、子のスタッキングコンテキストを作成します。その理由は、負のz-indexです。

カテゴリ3はカテゴリ2にレンダリングされるため、#page-navは#domain-background-containerの前です。
#domain-background-containerからz-indexを削除するか、0または肯定にすると、カテゴリ6または7になり、#page-navの後にレンダリングされます。

理論上、＃page-navのz値を設定して上げることができました。それはこのシンプルなjsfiddleではうまくいくものですが、ドメインホットスポットに続くすべての要素にそれを適用しなければならないより大きなプロジェクトではそうしたくないのです。 [...]私は今述べた2つの "解決策"を使うことができないので、どのような解決策が残っていますか？

z-valueを実際に持ち上げる必要はなく、単に配置するだけです。 position: relativeでも、できます。
そして、すべての要素に#domain-background-container次奇跡のいずれかであることを適用する：非常によく

#domain-background-container ~ * { 
    position: relative; 
}

作品：しかし、それは実現可能でない状況が明らかに

html, body {  /* <--- (1) */ 
 
    height: 100%; } 
 

 
#domain-background-container { 
 
    position: fixed; 
 
    /*z-index: -10;*/ } /* <--- (2) */ 
 

 
#domain-background-container ~ * { 
 
    position: relative; } 
 

 
.domain-hotspots { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    position: fixed; 
 
    background: blue; } 
 

 
    #hotspot { 
 
    width: 2em; 
 
    height: 2em; 
 
    background: green; } 
 

 
    #hotspot:hover .bubble { 
 
    background: red; } 
 

 
#page-nav { 
 
    width: 100%; 
 
    text-align: center; 
 
    background: yellow; } 
 

 
#page-nav:hover p { 
 
    color: red; }

<div id="domain-background-container"> 
 
    <div class="domain-hotspots"> 
 
    <div id="hotspot"> 
 
     <p class="bubble">I'm red on hover</p> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div id="page-nav" > 
 
    <p>I'm red on hover</p> 
 
</div>

はありませんすべての要素を配置します。

別の解決策は、しかし、単にその後、あなたはそれに独自のz-index与えることができますbody要素、配置することである。

body { 
    position: relative; 
    z-index: -11; 
}

デモ：

html, body {  /* <--- (1) */ 
 
    height: 100%; } 
 

 
body { 
 
    position: relative; 
 
    z-index: -11; } 
 

 
#domain-background-container { 
 
    position: fixed; 
 
    z-index: -10; } /* <--- (2) */ 
 

 
#domain-background-container ~ * { 
 
    position: relative; } 
 

 
.domain-hotspots { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    position: fixed; 
 
    background: blue; } 
 

 
    #hotspot { 
 
    width: 2em; 
 
    height: 2em; 
 
    background: green; } 
 

 
    #hotspot:hover .bubble { 
 
    background: red; } 
 

 
#page-nav { 
 
    width: 100%; 
 
    text-align: center; 
 
    background: yellow; } 
 

 
#page-nav:hover p { 
 
    color: red; }

<div id="domain-background-container"> 
 
    <div class="domain-hotspots"> 
 
    <div id="hotspot"> 
 
     <p class="bubble">I'm red on hover</p> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div id="page-nav" > 
 
    <p>I'm red on hover</p> 
 
</div>

出典

2016-09-25 01:06:27 Siguza

偉大な説明:)私からの投票を得ました（私はここで私の答えを持っていましたが）） – Dekel

Awsome答え！私が答えたかったことを知らなかったものを含め、すべての私の質問に答えて管理しました。どうもありがとうございます！ – assailant

は、あなたが実際には、bodyタグの後ろにいるのdivを置きます。 body & html要素に対して100％の高さを除去することにより
は、body要素の高さは、実際#page-nav要素の高さになります（他の要素をfixedように配置されているので、それは、ページの高さになりません） - したがって - あなたがそれを前に置く他の要素がないので、あなたはそれを拾うことができます - それは、z-indexに基づいています。
ここで問題が（？）
あなたのソリューションはrelativeに#nav-pageの位置を設定し、#domain-background-containerにz-indexを削除することができますがある場合はわかりません。ここで

例です。

html, body { 
 
    height: 100%; 
 
} 
 

 
#domain-background-container { 
 
    position: fixed; 
 
} 
 

 
.domain-hotspots { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    position: fixed; 
 
    background: blue; 
 
} 
 

 
#hotspot { 
 
    width: 2em; 
 
    height: 2em; 
 
    background: green; 
 
} 
 

 
#hotspot:hover .bubble { 
 
    background: red; 
 
} 
 

 
#page-nav { 
 
    width: 100%; 
 
    text-align: center; 
 
    background: yellow; 
 
    position: relative; 
 
} 
 

 
#page-nav:hover p { 
 
    color: red; 
 
}

<div id="domain-background-container"> 
 
    <div class="domain-hotspots"> 
 
     <div id="hotspot"> 
 
     <p class="bubble">I'm red on hover</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div id="page-nav" > 
 
    <p>I'm red on hover</p> 
 
    </div>

出典

2016-09-25 01:00:20 Dekel

それは少しより多くの情報が完全に理にかなって何かに「無意味な混乱」を変換することができますどのようにただ驚くべきことです！どうもありがとうございます！どうやらスタックエクスチェンジは私に「回答」として1つの投稿を選択させるように強制していたので、Siguzaにそれを与えなければなりませんでした。なぜなら、。それでも、あなたと他の皆さんに、すばらしい、そして非常に迅速な答えをお寄せいただきありがとうございます。非常に高く評価！ – assailant

を

これがどのように動作するかを管理する規則は少し複雑です。実際に調べたい場合は、CSS仕様のAppendix E. Elaborate description of Stacking Contextsを参照してください。あなたの具体的な質問に関して：#domain-background-containerが負z-indexであるため、デフォルトz-indexを持っている体は、それをカバーし、「ブロック」ポインタイベントよう

ホットスポットは、トリガされません。開発者ツールに入り、「クリックして要素を選択」機能を使用すると、これが実際に動作することがわかります。ホットスポットの代わりにボディが強調表示されているため、上に表示されています。
ボディの高さを削除すると、ボディに配置された要素のみが含まれているため、ボディの自然な高さは0になり、バックグラウンドをブロックしなくなります。あなたが要素を1つ与える場合、または要素に高さを貸す要素（絶対的でも固定的でもない）が含まれている場合、要素は高さのみを持ちます。
はい、Z-インデックスゲームの再生はプロジェクトでうまく調整されません。可能な限り、自然な積み重ねを最小限に抑えて使用してください。
あなたの意図はあなたのページのレイアウトではっきりしませんが、複数の潜在的な解決策があります。たとえば、マウスイベントを下位レベルに「通過」させたい要素でpointer-events: noneを使用することができます。

サンプル：

body { 
    pointer-events: none; 
} 

#domain-background-container { 
    pointer-events: auto; 
}

出典

2016-09-25 01:11:54 Jacob

'pointer-events'プロパティをうまく使います！ – Dekel

Dito Dekel！また、そのアプローチを理解することは貴重です！ありがとうございました！ – assailant

ホバー、Z-インデックスおよびレイヤリング...複雑な混乱？

答えて

関連する問題