html - 在 XHTML Strict 中实现深度

Question

我想<div>在 a 下实现<table>，换句话说，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 将是第一个 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 也适用于具有相对定位的元素。