全屏減z-索引錨不可點擊

問題全屏減z-索引錨不可點擊

我使用的jQuery超大型全屏幕背景圖像，這將是一個可點擊的廣告。在標記的主要內容之上，我使用了一個錨標記，位置固定，z-index爲-1，顯示塊和高度/寬度爲100％。所有這些都可以很好地工作，問題在於應用z-index時，該錨標籤的「可點擊性」消失。

任何人有任何想法？我可以使用2個錨定標記，定位絕對的主要內容，並將它們推送到每一邊，但我不確定這種效果通常如何應用。

任何幫助，將不勝感激

來源

2011-04-19 eagleworks

有什麼東西掩蓋了？現在它背後的一切？ – ohmusama 2011-04-19 21:03:30

不，因爲內容是在960px寬的包裝內。當z-index被改變時，整個頁面變得可點擊，似乎當z-index改變爲-1時，錨標記消失，但是如果我鍵入它，則該類型在背景圖像上方。 – eagleworks 2011-04-19 21:07:54

如果你製作[jsFiddle測試用例]（http://jsfiddle.net）或者提供一個實時頁面來查看，我們來看看。 – thirtydot 2011-04-19 21:27:55

較低的z索引，下部是在堆疊環境。

將-1放在錨點上理論上將其置於z-index爲0的元素下面，因此您可能因此失去點擊能力。

我找不到引用來支持這一點，但我不認爲負值是允許的。

的堆疊上下文參考： TimKadlec.com -- Detailed Look at Stacking in CSS

更新

一些快速擺弄周圍發現的-1錨的z-index：

與沒有其他的頁面 - 使其在Chrome中無法點擊。
與頁面上只是一個其他元素 - 由錨未點擊在 Chrome和Firefox（但不是IE8）

...所以我會建議對Z軸的負-指數。將它顛倒爲0，並將z-index設置爲1，然後查看是否有效。

來源

2011-04-19 21:11:29 Faust

是的，它將它置於z-index爲0的內容之下，那就是計劃。然而，不可點擊的區域跨越整個寬度，而不僅僅是上述內容的寬度。 W3表示允許neg值。 – eagleworks 2011-04-19 21:13:51

我明白了。你可以發佈一些標記和CSS？也許在jsfiddle.net？ – Faust 2011-04-19 21:16:53

是的，CSS/html非常簡單。用於全屏主播標記的CSS 'code' ＃fullscreen-ad { width：100％; height：800px; display：block; 職位：固定; top：0; z-index：-1; 背景：藍色; } 'code' And the content wrapper ＃site-wrapper { background：#fff; width：960px; margin：36px auto 0 auto; } 除了在標記中它是一個非常簡單的錨標記後跟div。 – eagleworks 2011-04-19 21:24:11

即使您的某些元素可能具有不可見的背景，您仍然無法點擊它們。您必須先決定不會導致點擊廣告的那組元素。他們必須都是你的廣告的兄弟元素，或者它們的孩子。現在，如果您在其上設置了background-color:red，那麼用戶的點擊次數不會觸發您的廣告（這當然是可視化的）。如果有必要，您現在可以將廣告的z-index設置爲-1。

之後，您可能需要將position:relative放在所有這些元素的父元素上，而不是正數。

身體標記也可能會受到干擾。

來源

2011-04-19 21:19:14 ninjagecko

我相信我明白了，但如果我的內容包裝僅爲960像素寬，並且後面的錨標記爲100％，我不會點擊背景？ – eagleworks 2011-04-19 21:21:39

全屏減z-索引錨不可點擊

回答

相關問題