無法選擇單選按鈕：z-index問題？

我正在用單選按鈕觀察這種奇怪的行爲。每當我設置父div的z-index時，我無法選擇單選按鈕。無法選擇單選按鈕：z-index問題？

這裏是小提琴鏈接：http://jsfiddle.net/x7rm63n9/2/。嘗試選擇主框內的按鈕。

主DIV CSS樣式是：

.main_box 
{ 
position: relative; 
background-color: #444; 
width: 65%; 
margin: 30px auto; 
height: 450px; 
z-index: -6;  /* IF I REMOVE THIS LINE I CAN SELECT THE RADIO BUTTONS*/ 
border: 12px solid #fff; 
}

這究竟是爲什麼？有沒有任何解決方法，而不改變z-index？

我試圖設置簡單的演示。（http://jsfiddle.net/juruf6a8/1/）這裏工作正常。

由於提前，

來源

2014-11-06 maverick1989

您已將'-6的'z-index'設置爲使您的內容位於_下方，因此無法點擊。你爲什麼需要消極的'z-index'？ – Turnip 2014-11-06 12:18:29

正如你所看到的，我需要獲得主盒子上的標題div。另外我還有兩個div在主盒子的底部產生陰影效果。所以使用z-indexes – maverick1989 2014-11-06 12:22:04

@Moobs它在演示鏈接中如何工作？還有我設置了-6的索引-12 – maverick1989 2014-11-06 12:23:02

試試這個我已經做了更新，它是工作在我結束。 http://jsfiddle.net/x7rm63n9/4/

這裏是你必須做的：

-remove的Z-index：「主箱」 DIV

-wrap另一個DIV中的旗幟格稱爲-6「的旗幟-container「並將其寫入此代碼

.banner-container{ 
    z-index:1; 
    position:relative; 
} 
.banner-container:after{ 
    clear:both; 
    content:''; 
    display:block; 
}

來源

2014-11-06 13:06:19

絕妙的回答。謝謝@穆罕默德。你能告訴我這背後的邏輯是什麼嗎？謝謝。 – maverick1989 2014-11-06 16:22:32

請給我打電話Ameen :)我用螢火蟲檢查了你的代碼，發現橫幅沒有合適的佈局。如果你用螢火蟲檢查你的代碼，然後檢查我所做的代碼，你可以看到差異。由於該橫幅已經在另一個div之前和之後使用。用於創建佈局。通過使用：之後，我創建了一個佈局，其中包括其前後的整個橫幅，並使用z-index和位置將整個橫幅放在主塊的頂部 – 2014-11-07 11:31:26

你可能只是進行內部main_box更高的單選按鈕，如果你必須保持-6的z-index的main_box本身。

.main_box, input[type=radio] 
{ 
    z-index:0; 
}

http://jsfiddle.net/x7rm63n9/3/

來源

2014-11-06 12:22:55

無法選擇單選按鈕：z-index問題？

回答

相關問題