html - 位置 :absolute inside position:relative doesnt work

Question

我有 table 和 tr 我设置了 tr position:relative 并且我在 tr 中添加了 span 元素并给它 position:absolute 和 left:0 但它相对于 html 的定位不是我的 tr 元素

table {
  border-collapse: collapse;
}

td {
  width: 200px;
  height: 60px;
  border: 1px solid black;
}

tr {
  border: 1px solid blue;
  position: relative;
  height: 60px;
  display: block;
}

.remove {
  display: inline-block;
  position: absolute;
  left: 0;
}

<table style="border:1px solid black;">
  <th>Name</th>
  <th>Logo</th>
  <tr>
    <td>Name</td>
    <td>Logo</td>
    <span class="remove">This should be on left side</span>
  </tr>
  <tr>
    <td>Namer</td>
    <td>Logo</td>
  </tr>
</table>

Answer 1

因为你在表格布局中使用了span标签，使得span在表格之外。对元素使用 td 标签。

table {
  border-collapse: collapse;
}

td {
  width: 200px;
  height: 60px;
  border: 1px solid black;
}

tr {
  border: 1px solid blue;
  position: relative;
  height: 60px;
  display: block;
}

.remove {
  all:initial;
  position: absolute;
  left: 0
}

<table style="border:1px solid black;">
  <th>Name</th>
  <th>Logo</th>
  <tr>
    <td>Name</td>
    <td>Logo</td>
    <td class="remove">This should be on left side</td>
  </tr>
  <tr>
    <td>Namer</td>
    <td>Logo</td>
  </tr>
</table>