Html 在div上方对齐表格

我有一个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>

---

你试过把图像放在桌子后面吗

 </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标记后插入它

<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>

哈马达拉
是
彭纳
海德菲克

为了查看“上面”的表格（我想你指的是z轴），因此图像显示为表格的背景，你可以使用两种备选解决方案

1）您的foto2部门的背景。 2） 绝对定位表

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

我认为对于未定位元素（实际上也不起作用）不需要具有左属性的oben规则。还有span标签，除非你有特别的原因，否则我会把它排除在游戏之外……嗯

这是

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

#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>

这里是绝对表

<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>

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