将HTML表格元素放在img元素的顶部

Question

我希望能够使用css在图像上放置一个html表格。我想把桌子移开，看起来如下图所示：

这就是我目前所拥有的：

我希望它看起来像这样：

这就是我的代码：

<img src="@Url.Content(" ~/images/sortByDivisionControl_BG2.png ")" width="570">
<table id="locations-table" style="margin:0 auto;">
  <thead>
    <tr>
      <th colspan="3">
        Locations
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <a>Anchorage, AK</a>
      </td>
      <td>
        <a>Spokane, WA</a>
      </td>
      <td>
        <a>Coburg, OR</a>
      </td>
    </tr>
    <tr>
      <td>
        <a>Kapolei, HI</a>
      </td>
      <td>
        <a>Toledo, WA</a>
      </td>
      <td>
        <a>Medford, OR</a>
      </td>
    </tr>
    <tr>
      <td>
        <a>Snohomish, WA</a>
      </td>
      <td>
        <a>Ridgefield, WA</a>
      </td>
      <td>
        <a>Redmond, OR</a>
      </td>
    </tr>
    <tr>
      <td>
        <a>Kent, WA</a>
      </td>
      <td>
        <a>Bend, OR</a>
      </td>
      <td>
        <a>Portland, OR</a>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

这是background images的用途。我会这样做：

<table id="locations-table" style="margin:0 auto; background-image: @Url.Content("~/images/sortByDivisionControl_BG2.png")">

Answer 2

您也可以使用css设置z-index。 有关信息： Check This