html - 在表格单元格内使用时绝对位置不起作用

Question

我有一个容器，它有 position: relative 和 overflow: hidden

里面有一张 table ，在它的许多行中，我放置了一个 span ，它是绝对定位的，而 span 的左边被赋予了大于容器宽度的东西.

     <div>
        <table border="1">
            <tr>
               <td><span></span></td>
            </tr>
        </table>
    </div>

它的 CSS 是:

       div{
            position: relative;
            width: 300px;
            height: 300px;
            border: 2px solid red;
            overflow: hidden;
        }
        span{
            position: absolute;
            left: 380px;
            width: 30px;
            height: 30px;
            border: 1px solid green;
        }
        table{
            border-collapse: collapse;
        }
        tr{
            width: 150px;
            height: 20px;
        }
        td{
            padding: 5px;

            width: 100%;
        }

当 span 简单地放在一个 div 中时，尽管 div 的溢出被隐藏了，但 span 仍然显示出来。

但是，一旦我在 div 中放置一个表格，然后将此 span 放置在其中一个 td 中，它就会停止工作。

我们将不胜感激。

工作正常的 Div 代码:

   <div> 
       <span></span>
   </div>

CSS 的其余部分保持原样。

附言:

1. 无论如何我都需要用到这张 table 。
2. 如果您想查看正在运行的 div 的演示，请在您的本地查看，因为该 fiddle 内置了表格，因此代码无法在那里运行。

我创建了一个演示 fiddle为此。

Answer 1

请检查JSFIDDLE关联。我根据您的要求更新了您的代码。

div {
  position: relative;
  width: 300px;
  height: 300px;
  border: 2px solid red;
  overflow: hidden;
}
td {
  position: relative;
}
span {
  position: absolute;
  left: 0px;
  right: 0;
  top: 0;
  bottom: 0;
  /* width: 30px; */
  /* height: 30px; */
  border: 1px solid green;
}
table {
  border-collapse: collapse;
}
tr {
  width: 150px;
  height: 20px;
}
td {
  padding: 5px;
  width: 100%;
}

<div>
  <table border="1">
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td><span></span>
      </td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>

  </table>
</div>