在HTML表格中重叠图像

Question

有人可以解释为什么图像重叠吗？

<table width="100%" border="0" cellpadding="5">
 <tr>
  <td width="20%"><div class="smallfont"><a href="link1"><b>Nymphomaniac: Vol. II<br></br>(2013)</b></a></div>
   <div style="position:relative; left:0; top:0;">
    <img src="http://static.rogerebert.com/uploads/movie/movie_poster/nymphomaniac-vol-i-2014/large_3lVe9Os8FjpX1VgtdT9VFnbqs5f.jpg" style="z-index:1; position:absolute; left:10px; top:0;" width="150" height="230"/>
    <img src="http://s2.postimg.org/wl6fn18ft/moldura.png" style="z-index:2;position:absolute; left:0; top:0;"/>
    <img src="http://s27.postimg.org/njcn0o0vn/player.png" style="z-index:3;position:absolute; left:0; top:0; opacity: 0;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0;this.filters.alpha.opacity=0"/>
    </div>
  </td>
 </tr>
 <tr>
  <td width="20%"><div class="smallfont"><a href="link2"><b>Nymphomaniac: Vol. II<br></br>(2013)</b></a></div>
   <div style="position:relative; left:0; top:0;">
    <img src="http://static.rogerebert.com/uploads/movie/movie_poster/nymphomaniac-vol-i-2014/large_3lVe9Os8FjpX1VgtdT9VFnbqs5f.jpg" style="z-index:1; position:absolute; left:10px; top:0;" width="150" height="230"/>
    <img src="http://s2.postimg.org/wl6fn18ft/moldura.png" style="z-index:2;position:absolute; left:0; top:0;"/>
    <img src="http://s27.postimg.org/njcn0o0vn/player.png" style="z-index:3;position:absolute; left:0; top:0; opacity: 0;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0;this.filters.alpha.opacity=0"/>
    </div>
 </tr>
</table>

示例图片：

Answer 1

问题是包含<div>标记的<img>代码同时没有 width 和 height 属性{{1有宽度和高度。 所以如果你添加下一个css代码：

<img>

然后您要将<style> div.photodiv{ width: 150px; height: 230px; } </style> 添加到其中包含class="photodiv"的{​​{1}}元素。 这里是所有代码：

<div>

Answer 2

您需要在代码中添加一些css，所以添加

<style>
    #poster{
       padding-bottom:230px;
    }
</style>

然后您要将id="poster"添加到第一个<div class="smallfont">，并将其<div class="small font" id="poster">