懸停，Z指數和分層......一個令人費解的混亂？

我是一名Web開發人員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（即綠色正方形）不會進入懸停狀態。

我期待有四件事情解釋：

有人能提供或指向我的機械師防止#hotspot進入懸停狀態的詳細說明？
刪除CSS規則集（1）[身高：100％的html和body]允許#hotspot進入懸停狀態。在我的項目中這不是一個可行的解決方案，但是爲了好奇心，爲什麼這會產生影響。
刪除CSS規則集（2）的z-index也允許#hotspot進入懸停狀態。不幸的是，這也將z排序搞亂，因爲.domain-hotspots（藍色）然後覆蓋＃page-nav（黃色），這是不可接受的。理論上我可以定位並提高＃page-nav的z值。雖然這將適用於這個簡單的jsfiddle，但我不願意爲一個更大的項目做到這一點，我必須將這些應用到每個跟隨.domain-hotspots的元素（這甚至不是必需的，因爲我的理解元素未修改的Z索引，後面的.domain-hotspots在html文件中應該被渲染在視口中的.domain-hotspots之上）： -/
我不能使用剛纔提到的兩個「解決方案」解決方案仍然是

我真的很感謝任何知識的人可以分享這個！我很難過。我甚至不知道我應該谷歌來研究這個問題，因爲我不知道是什麼導致了這種行爲。

來源

2016-09-25 assailant

有人可以提供或指向我的機械師防止#hotspot進入懸停狀態的詳細說明？

<body>正在掩蓋它。
這可以通過使用瀏覽器開發工具的「Inspect element」功能來看到。（由於道路z-index工作雖然，給它一個background不把這樣的背景下在div前面）

刪除CSS規則集（1）高度：HTML和身體100％]允許#hotspot進入懸停狀態。在我的項目中這不是一個可行的解決方案，但是爲了好奇心，爲什麼這會產生影響。

隨着height: 100%：

沒有height: 100%：

[...]我與未改性的z-index理解的要點隨後。域html文件中的熱點應該在之上呈現在視口中。

從CSS Level 2 draft，§9.9.1：

在每個堆疊上下文中，下列各層塗在後端到前序：

的背景和邊界構成堆疊上下文的元素。

孩子堆疊負面堆棧級別的情況下（最負面的第一個）。

流入式，非內聯式，非定位後代。

非定位花車。

流入內聯級別的未定位後代，包括內聯表和內聯塊。

子堆疊堆棧級別爲0的上下文以及堆棧級別爲0的定位後代。

子堆疊正堆棧級別（最不積極優先）的上下文。

#page-nav是3類由於對任何<div>默認display: block。
#domain-background-container是第2類由於position: fixed，其從流中刪除，並創建一個子堆疊上下文，並且由於其負z-index。

將類別3渲染爲類別2，因此#page-nav位於#domain-background-container之前。
現在，當您從#domain-background-container中刪除z-index，或將其設置爲0或正數時，它將變爲類別6或7，從而在#page-nav之後呈現（即超過）。

理論上我可以定位並提高＃page-nav的z值。雖然這將適用於這個簡單的jsfiddle，但我不願意爲一個更大的項目做到這一點，因爲我必須將其應用於.domain-hotspots之後的每個元素。 [...]我不能使用我剛剛提到的兩個「解決方案」，那麼還有什麼解決方案？

你實際上不必提高其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>

不可否認不過，在有些情況下是不可行定位所有這些元素。

另一種解決方案雖然是簡單地將body元素，然後讓你給它自己的一個z-index定位：

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

通過設置#domain-background-container到z-index: -10，你居然把該分區的body標籤後面，所以您將鼠標懸停在body標籤，而不是在#hotspot標籤。
通過在body & html元件除去100％的高度，body元素的高度實際上將#page-nav元件的高度（因爲其他元件被定位爲fixed，所以它不會採取的頁面的高度） - 因此 - 您可以將其懸停，因爲沒有其他元素位於「之前」 - 基於z-index。
不知道這裏有一個問號（？）
您解決方案可以給#nav-page位置設置爲relative並在#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

這是驚人的多一點信息，如何只改變一個「無厘頭亂」到的東西，使得完整意義上的！非常感謝！顯然stackexchange迫使我只選擇一個帖子作爲「答案」，所以我不得不把它交給Siguza，因爲他驚人地設法爲我排除了第三，我甚至無法以一致的方式陳述我的問題。不過，謝謝你和下面的其他人提供了非常快速的答案。非常感謝！我獲得了一個新的尊重Web開發人員的水平;-) – assailant

關於這一切如何運作的規則有點複雜;如果您真的想研究它，請參閱CSS規範中的Appendix E. Elaborate description of Stacking Contexts。關於你提到的具體問題：

熱點不會被觸發，因爲#domain-background-container處於負z-index，所以身體，它具有默認z-index，涵蓋了它和「塊」的指針事件。如果您進入開發人員工具並使用「單擊以選擇元素」功能，則可以看到此操作;身體突出顯示而不是熱點，因爲它位於頂部。
如果您刪除身體的高度，因爲身體只包含定位元素，身體的自然高度現在爲0，因此它不再阻止背景。一個元素只有在給定一個元素時才具有高度，或者如果元素包含「流動」元素（不是絕對的或固定的），則可以將其放到高度。
是的，玩z-index遊戲在項目中效果不好;儘可能減少並儘量使用自然堆積。
目前尚不清楚您的網頁佈局意圖是什麼，但有多種可能的解決方案。例如，您可以在要將鼠標事件「傳遞」到較低級別的元素上使用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指數和分層......一個令人費解的混亂？

回答

相關問題