Safari 和 iOS WebKit 对表格元素（如 ）应用 position: relative 无效，因其不支持表格内部元素作为 CSS 定位上下文；需改用非表格结构或包裹容器来实现可靠绝对定位。
safari 和 ios webkit 对表格元素（如 `
在 Web 开发中，尝试对 <tr> 设置 <code>position: relative 并在其子元素 <td> 上使用 <code>position: absolute 是一种常见但不符合规范的做法。根据 CSS 规范，表格格式化上下文（table formatting context）中的行（<tr>）、单元格（<code><td>）等元素<strong>不参与常规的 CSS 定位流</strong>，也不提供定位上下文（containing block）。因此，即使 Chrome 或 Firefox 在某些版本中“看似生效”，该行为属于非标准兼容性表现，而 Safari / iOS WebKit 严格遵循规范，直接忽略 <code><tr> 的 <code>position: relative 声明——此时 <td> 的 <code>position: absolute 将回退到最近的有效定位祖先（如 .container），导致布局错乱。
✅ 正确解决方案：避免依赖表格元素创建定位上下文。推荐以下两种稳健方式：
方案一：用语义化块级结构替代表格（推荐）
将表格逻辑重构为 div + Flex/Grid 布局，完全可控且跨浏览器一致：
<div class="container">
<div class="row">
<div class="cell"></div>
</div>
</div>
.container {
position: relative;
padding: 100px;
background-color: red;
}
.row {
position: relative; /* ✅ 有效：div 支持定位上下文 */
display: flex;
}
.cell {
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 10px;
background-color: blue;
}
方案二：在 ⚠️ 注意事项： 规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持... 总之，表格的核心职责是展示二维结构化数据，而非承担 UI 布局任务。将定位、动画、复杂交互逻辑交由标准块级容器处理，才能真正实现跨平台一致性与长期可维护性。<td> 内部嵌套定位容器（兼容旧表格结构）<br>
若必须保留 <code><table> 标签（如数据表格场景），可在 <code><td> 内添加一层 <code>div 并赋予定位能力：<div class="container">
<table><tr>
<td><div class="abs-wrapper"></div></td>
</tr></table>
</div>
.container { position: relative; padding: 100px; background: red; }
.abs-wrapper {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0; /* 等效 inset: 0 */
width: 10px;
height: 10px;
background-color: blue;
}
<tr>、<code><tbody>、<code><thead> 或 <code><table> 设置 <code>position: relative 以期望创建定位上下文——它们在所有主流浏览器中均不可靠； inset: 0 是 top: 0; right: 0; bottom: 0; left: 0 的简写，现代 Safari 已全面支持（iOS 14.5+），如需兼容更老版本，请展开书写； role="row" / role="cell" 补充 ARIA 属性。
