html - 在 div 上方对齐表格

Question

我有一个显示图像的 div 容器，在该图像上方我想显示一个表格。所以，我的问题是表格没有显示在图像上。相反，它显示在图像之后？有人可以告诉我如何对齐图像上方的表格吗？

<div id="foto2">
    <img src="foto2.jpg" class="bg"> <span class="oben">
    <table>
        <tr>
            <td onclick="playAudio('test.mp3')">Hamdullah</td>
            <td onclick="playAudio('test2.mp3')">Was?</td>
        </tr>
        <tr>
            <td onclick="playAudio('test.mp3')">Penner</td>
            <td onclick="playAudio('test2.mp3')">Heidefick</td>
        </tr>
    </table>
    </span>
</div>

我的CSS：

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    background-color:#00061c;
}
img.bg {
    width: 100%;
}
.oben {
    left: 0;
    width: 100%;
}
@font-face {
    font-family: "Hallo";
    src: url(hallo.ttf);
}
table {
    width:100%;
    color:#FFF;
}
tr {
    text-align:center;
}
td {
    font-family: Hallo;
    font-size: xx-large;
}

Answer 1

为了在“上方”看到您的表格（我想您的意思是在 z 轴上。）因此图像显示为表格的背景，您可以使用 2 个替代解决方案

1）您的 foto2 div 的背景。2) 绝对定位表

备选方案 1：您的 foto2 div 的背景。

我认为对于未定位的元素（实际上也不起作用），我认为您不需要带有 left 属性的 oben 规则。跨度标签以及我会将它排除在游戏之外，除非你有一个非常特殊的原因......嗯

这是小提琴

这是 foto2 div 的 css。您可以随意调整重复和其他属性

#foto2 {
  background:url( your image url here );
}

这是html

<div id="foto2"> 
 <table>
 <tr>
    <td onclick="playAudio('test.mp3')">Hamdullah</td>
    <td onclick="playAudio('test2.mp3')">Was?</td>
 </tr>
 <tr>
     <td onclick="playAudio('test.mp3')">Penner</td>
    <td onclick="playAudio('test2.mp3')">Heidefick</td>
</tr>
</table>

 </div>

备选方案 2：绝对定位表

使用这种替代方法，您可以使用全宽图像，而不受表格大小的限制。它是你的电话，可以使用你的 foto2 div 应该是相对定位的。然后....

table { 
    position:absolute;
    top:0px;
width:100%;
color:#FFF;
}

这里是绝对表的小提琴

Answer 2

你有没有试过把图片放在桌子后面，比如？

 </table>
     <img src="foto2.jpg" class="bg" />  

或者把它放在表格的最下面一行，比如：

 <tr>
    <td onclick="playAudio('test.mp3')">Penner</td>
    <td onclick="playAudio('test2.mp3')">Heidefick</td>
 </tr>
 <tr>
   <td><img src="foto2.jpg" class="bg"></td>
 </tr>
 </table>

顺便说一句，你为什么使用<span>并把它放在<table>里面？

Answer 3

尝试在结束跨度标记之后插入它

<div id="foto2">
    <span class="oben">
        <table>
            <tr>
                <td onclick="playAudio('test.mp3')">Hamdullah</td>
                <td onclick="playAudio('test2.mp3')">Was?</td>
            </tr>
            <tr>
                <td onclick="playAudio('test.mp3')">Penner</td>
                <td onclick="playAudio('test2.mp3')">Heidefick</td>
            </tr>
        </table>
    </span>
    <img src="foto2.jpg" class="bg" />
 </div>