CSS: position:absolute inside position:relative，但不影响父级？

Question

<style>
.special p { display:none; }
.special:hover p { display:block; }
</style>

<table>
  <tr>
    <td style="width:200px">Things</td>
    <td style="position:relative; width:220px">
      <div style="position:absolute;right:0" class="special">
        <img id="shows" />
        <p>Variable width upto, say 600px (Will be hidden until this td is :hovered</p>
      </div>
    </td>
  </tr>
  <tr>
    <td style="width:200px">Things</td>
    <td style="position:relative; width:220px">
      <div style="position:absolute;right:0" class="special">
        <img id="shows" />
        <p>Variable width upto, say 600px (Will be hidden until this td is :hovered</p>
      </div>
    </td>
  </tr>
</table>

我可以完成这项工作吗？即，我可以使 #special p 扩展到“Things”的顶部吗？正如我目前设置的那样，#special 永远不会超出 220px 宽的 td。有什么想法吗？

Answer 1

我还不是很清楚，但试试这个。这将允许 TD 在显示内容时增长。

<table>
  <tr>
    <td style="width:200px">Things</td>
    <td style="text-align: right;">
      <div class="special">
        <img id="shows" />
        <p>Variable width upto, say 600px (Will be hidden until this td is :hovered</p>
      </div>
    </td>
  </tr>
</table>