最近做背投廣告，因為預設頁面沒有設定z-index，發現如果將z-index為負值的元素無法點選到，那麼解決方案就是將背投廣告z-index設定為1，其它元素z-index增加。
假設有這樣乙個需求：
header和主區域是原來就有的，www.cppcns.com現在要在頁面中加乙個背景圖，要求該背景圖層在主區域之下，但在主區域之外的部分可點選，是乙個鏈結。
我簡單思考了下，就知道不能用背景圖實現，因為背景圖是無法點選的。雖然可以勉強用js監聽body點選然後程式設計客棧根據點選位置來判斷是否是背景圖發生了點選，但這未免太笨拙。於是決定在主區域下鋪一層，設定z-index:-1.設定為b程式設計客棧gimg的背景圖。**如下：
>
但是事實證明這樣設定程式設計客棧後, bgimg無法被點選到，hover時也不會顯示手形，因為z-index為負值的元素將被放置在body層之下，所以點選和hover事件都被body層覆蓋了。
解決方案：
1. z-index設為0. 主區域設為position:relative; z-index: 1;這樣能保證背景層不會影響主區域，並且在主區域外的部分也可以點選。
2.結構與1一樣，只是實現方式不同。不使用position，而是使用負margin-bottom實現：
背景層
主區域不用做任何改動.
原理是負的margin-bottom會將下方的元素拉上來,背景層的高度= height + padding-top + padding-bottom + border-top-width + border-bottom-width + margin-top+ margin-bottom = 0. (沒設定的屬性在reset.css中一律被重置為0了).所以背景層不會佔據文件流的空間, 同時還可以被點選到.
本文標題: z-index為負值的元素無法點選到的解決方法
本文位址:
點讚打賞
分享如果認為本文對您有所幫助請贊助本站
標籤：z-index 負值 無法點選
前端面試必備之同源和跨域詳解手機網頁wap用bootstrap還是jquery mobile
margin為負值的幾種情況
1 margin top為負值畫素 margin top為負值畫素，偏移值相對於自身，其後元素受影響，見如下 1 2 333 34 35 36 子元素1 37 38 39 子元素2 元素2跟著上移了 40 41 42 43 效果 2 margin left為負值畫素 margin left為負值畫素...
z index設定完後，元素仍然無法在頂層顯示
如下兩步檢查 檢查position屬性。z index只能在position屬性值為relative或absolute或fixed的元素上有效。觀察跟需要覆蓋元素是否已不在同乙個父節點中。我們通常都是在同乙個父節點的子節點中設定z index值，所以可以控制子節點相互覆蓋的情況，但有時候，子節點超出...
HTML元素的Z index屬性是如何工作的
摘要 在乙個web頁面上有很多種方法去把元素分類.基於本文的目的和z index屬性,我們可以把他們分為兩類 視窗類和非視窗類.視窗類元素 標誌元素 activex 控制項 plug ins 動態 html dhtml scriptlets select 元素 inter explorer 5.01...