Z指數不起作用

我一直有z-index財產問題。下面你可以看到一個例子：Z指數不起作用

<div id="popup"> 
    <div id="button"> 
    </div> 
</div> 

<div id="trip"> 
</div> 

<div id="gray"> 
</div>

https://jsfiddle.net/cf5dhv39/1/

正如你所看到的，我想的是，DIV #button覆蓋股利#gray（如股利#trip一樣），但是，不管我有多麼增加在#button中的z-index，按鈕不覆蓋#gray。

來源

2016-01-15 Bruno Morais

這是*堆疊上下文*的問題。這可能會有所幫助：[z-index'屬性的基礎]（http://stackoverflow.com/a/32515284/3597276）。 –

請直接在問題*中發佈相關的CSS代碼，而不僅僅是在JSFiddle上。 –

非常有用的邁克爾，謝謝。對不起Gothdo，下次我會這樣做;） –

這是因爲#popup具有較小的z-index比#gray和#button是#popup孩子因此會一直落後#gray，但你可以把#gray內#popup

div{ 
 
    width: 100px; 
 
    height: 100px; 
 
    background: black; 
 
    position: relative; 
 
} 
 

 
#popup{ 
 
    z-index: 100; 
 
    width: 300px; 
 
    height: 300px; 
 
} 
 

 
#button{ 
 
    top: 10px; 
 
    left: 10px; 
 
    z-index: 2; 
 
    background: green; 
 
} 
 

 
#trip{ 
 
    top: 40px; 
 
    left: 10px; 
 
    background: blue; 
 
    z-index: 1000; 
 
} 
 

 
#gray{ 
 
    width: 100%; 
 
    height: 100%; 
 
    position: fixed; 
 
    background: gray; 
 
    top: 0px; 
 
    left: 0px; 
 
    opacity: 0.5; 
 
    z-index: 1; 
 
}

<div id="popup"> 
 
    <div id="button"></div> 
 
    <div id="gray"></div> 
 
</div> 
 

 
<div id="trip"></div>

來源

2016-01-15 16:13:14

我把灰色裏面彈出，在這裏工作正常，謝謝！ –

Z指數不起作用

回答

相關問題