CSS - 相對元素隱藏另一個

Question

我有幾個<table>元素。我只用一個css屬性position: relative;來設置它們，以顯示一些您可以在屏幕上看到的額外信息。但是，如果兩個表格元素的樣式，其中一個是被另一個隱藏，我不知道爲什麼。我可以在左側使用z-index: 1;，但我相信這不是解決問題的最佳方法。我已經嘗試了溢出和可見性屬性，但是他們都沒有工作。

link

Answer 1

請注意，我們需要您共享您的代碼，所以我們可以找出問題的所在。但我會盡力幫助你。

我從圖像中假定您使用的是position: relative容器，藍色條紋是position: absolute，對不對？

在這種情況下，請從相關元素中刪除z-index，並將其僅設置在position: absolute上，如您在示例波紋管中所見。希望它能幫助：

.relative { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
    background: white; 
 
} 
 

 
.absolute { 
 
    position: absolute; 
 
    top: 5px; 
 
    left: 20px; 
 
    width: 100px; 
 
    height: 20px; 
 
    background: red; 
 
    z-index: 100; 
 
}

<table> 
 
    <tr> 
 
    <td class="relative"> 
 
     <div class="absolute"></div> 
 
    </td> 
 
    <td class="relative"> 
 
     <div class="absolute"></div> 
 
    </td> 
 
    </tr> 
 
</table>