位置：绝对内部位置：相对不起作用答案

【问题标题】：Position:absolute inside position:relative doesnt work位置：绝对内部位置：相对不起作用
【发布时间】：2019-10-05 20:20:36
【问题描述】：

我有 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>

【问题讨论】：

是的，这是设计使然，将尝试找到确切定义的位置
'position:relative' 对 table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table- 的影响column、table-cell 和 table-caption 元素未定义。 --> tr 是表格行 (w3.org/TR/CSS2/visuren.html#propdef-position)
想做什么？您将 span 直接放在 tr 元素中，这是错误的。 <tr> 后面总是跟<td> or <th>。
另外，您不能在<table> 中直接使用<th>。它必须进入<tr>。请遵循表结构 (w3schools.com/html/html_tables.asp)。
@Alohci 是的，我的评论是在他发布代码之前。他在 tr 上也有 display:block 所以即使 HTML 是正确的它也能工作。但如果没有 display:block 它将在 Chromel 上失败：jsfiddle.net/wcuakovg/2（在 FF 上有效）

标签： html css

【解决方案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>

【讨论】：