Question

我想在<div>下面实现<table>，换句话说，div会显示，因为表格中有透明的png，但它会在<table>后面。< / p>

有谁知道怎么做？

我尝试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样式将元素放在彼此的顶部。

你也可以试试把＆lt; div＆gt;在标记的表格前面，在div上设置float: left，然后他们向左移动表格，将其放在div的顶部，使用负margin-left值。

例如：

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

使用以下CSS，第二个div将是第一个div的50px。

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-index不仅限于那些绝对定位的元素。 Z-index也适用于具有相对定位的元素。

在XHTML Strict中实现深度

3 个答案: