z-index和溢出沒有正確顯示div

Question

我正在一個項目中，當用戶將鼠標懸停在一個框上時顯示消息，我創建了一個場景來模擬我遇到的問題。

藍色框應該顯示爲完整的250像素定義，不會被剪裁到200像素，包含div設置爲，有無論如何繞過這一點，我可以坐在包含div的藍色框作爲其需要自包含的UserControl的所有部分。

#first { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: green; 
 
    overflow: hidden; 
 
} 
 

 
#second { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: red; 
 
    position: relative; 
 
} 
 

 
#fourth 
 
{ 
 
    width: 250px; 
 
    height: 50px; 
 
    background-color: blue; 
 
    position: absolute; 
 
    z-index: 100; 
 
}

<div id="first"> 
 
    <div id="second"> 
 
     <div id="fourth"> 
 
     test 
 
     </div>  
 
    </div> 
 
</div>

Answer 1

不能完全確定這就是你後，但你需要做的是改變溢出從隱藏到可見的first DIV什麼：

#first { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: green; 
 
    overflow: visible; /* change this */ 
 
} 
 

 
#second { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: red; 
 
    position: relative; 
 
} 
 

 
#fourth 
 
{ 
 
    width: 250px; 
 
    height: 50px; 
 
    background-color: blue; 
 
    position: absolute; 
 
    z-index: 100; 
 
}

<div id="first"> 
 
    <div id="second"> 
 
     <div id="fourth"> 
 
     test 
 
     </div>  
 
    </div> 
 
</div>

Answer 2

變化：

#first { 
    width: 200px; 
    height: 200px; 
    background-color: green; 
    overflow: hidden; 

}

要

#first { 
width: 200px; 
height: 200px; 
background-color: green; 

}

換句話說，刪除溢出：隱藏和那個藍色div將出現你想要的。

Answer 3

有線說你從#first元素中刪除overflow: hidden;。否則，如果內部的所有元素都超出了界限，它們將被切斷。

#first { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: green; 
 
} 
 

 
#second { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: red; 
 
    position: relative; 
 
} 
 

 
#fourth 
 
{ 
 
    width: 250px; 
 
    height: 50px; 
 
    background-color: blue; 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 100; 
 
}

<div id="first"> 
 
    <div id="second"> 
 
     <div id="fourth"> 
 
     test 
 
     </div>  
 
    </div> 
 
</div>