在表格單元格上分層絕對定位的div

鑑於以下html代碼，我如何讓z-index紅色div覆蓋所有單元格。值得注意的是，紅色的div必須是絕對定位的，這樣它纔不會影響單元格的內容。在表格單元格上分層絕對定位的div

<html> 
 
\t <table style="position:relative;z-index:0;"> 
 
\t \t <tr style="height:100px;position:relative;z-index:0;"> 
 
\t \t \t <td style="position:relative;width:200px;height:inherit;background-color:green;border:solid 2px green;z-index:0;overflow:visible;"> 
 
\t \t \t  <div style="position:absolute;background-color:red;height:inherit;width:100%;top:10px;left:10px;z-index:500;"></div> 
 
\t \t \t  xyz 
 
\t \t \t </td> 
 
\t \t \t <td style="position:relative;width:200px;height:inherit;background-color:green;border:solid 2px green;z-index:0"></td> 
 
\t \t </tr> 
 
\t \t \t <tr style="height:100px;position:relative;z-index:0"> 
 
\t \t \t <td style="position:relative;width:200px;height:inherit;background-color:green;border:solid 2px green;z-index:0"></td> 
 
\t \t \t <td style="position:relative;width:200px;height:inherit;background-color:green;border:solid 2px green;z-index:0"></td> 
 
\t \t </tr> 
 
\t </table> 
 
</html>

來源

2015-01-17 MarzSocks

從所有元件中刪除z-index並給z-index: 1到紅色div的父元素（td）。

<html> 
 
<table style="position:relative;"> 
 
    <tr style="height:100px;position:relative;"> 
 
    <td style="position:relative;width:200px;height:inherit;background-color:green;border:solid 2px green;z-index:1;overflow:visible; "> 
 
     <div style="position:absolute;background-color:red;height:inherit;width:100%;top:10px;left:10px;"></div> 
 
     xyz 
 
    </td> 
 
    <td style="position:relative;width:200px;height:inherit;background-color:green;border:solid 2px green;"></td> 
 
    </tr> 
 
    <tr style="height:100px;position:relative;"> 
 
    <td style="position:relative;width:200px;height:inherit;background-color:green;border:solid 2px green;"></td> 
 
    <td style="position:relative;width:200px;height:inherit;background-color:green;border:solid 2px green;"></td> 
 
    </tr> 
 
</table> 
 

 
</html>

來源

2015-01-17 12:40:32

其實我發現刪除所有Z-指標都在一起，然後只把它運用在DIV一個zIndex的工作。 – MarzSocks

@MarzSocks - 是的，那也可以。 –

而這之所以更好 - 是因爲我們需要假定紅色div層可能在多個td元素中。感謝您的反饋。爲什麼z-index僅在單元格不包含z-index時才起作用？ – MarzSocks

在表格單元格上分層絕對定位的div

回答

相關問題