在XHTML中嚴格執行深度

Question

我想在<table>下執行<div>，換句話說，div將是可見的，因爲該表具有透明png，但會在<table>之後。

有誰知道如何做到這一點？

我試過float:left和不同z-index的，但無濟於事。

Answer 1

你在正確的軌道上。但是當使用Z-index時，你的元素也必須是絕對位置的。

下面是一個使用div的一個例子，但它也可以被表...

CSS：

div.top { 
    width: 300px; 
    height: 200px; 
    position: absolute; 
    left: 500px; 
    top: 50px; 
    z-index: 2 
} 

div.bottom { 
    width: 300px; 
    height: 200px; 
    position: absolute; 
    left: 600px; 
    top: 100px; 
    z-index: 1 
} 

HTML：

<div class="top">I'm on top</div> 
<div class="bottom">I'm below</div> 

Answer 2

的z-index只適用於絕對定位元素。您可以嘗試設置position: absolute，然後使用top, right, bottom, left樣式將元素放置在彼此的頂部。

您也可以嘗試把<DIV>在桌子前的標記，設置float: left的DIV，並將其移動離開了桌子，將它定位在DIV的頂部，使用負margin-left值。

例如：

<div id="d1"></div> 
<div id="d2"></div> 

使用下面的CSS，所述第二個div將50像素到第一個div。

div { 
    width: 100px; 
    height: 100px; 
    border: solid 1px rgb(0, 0, 0); 
} 
#d1 { 
    float: left; 
    background-color: rgb(255, 0, 0); 
} 
#d2 { 
    float: left; 
    margin-left: -50px; 
    background-color: rgb(0, 255, 0); 
    opacity: 0.5; 
} 

第二個div會有你的表。只是更容易用div來演示:)

Answer 3

只是爲了增加前面的兩個答案。 Z指數不僅限於那些絕對定位的元素。 Z-index也適用於具有相對定位的元素。