React 应用程序，绝对定位的子节点未相对于其相对定位的父节点定位（在 Chrome 中）答案

【问题标题】：React app, absolutely positioned child not positioned relative to its relatively positioned parent (in Chrome)React 应用程序，绝对定位的子节点未相对于其相对定位的父节点定位（在 Chrome 中）
【发布时间】：2018-11-16 19:31:34
【问题描述】：

我的 React 应用程序有一个奇怪的问题。如果我将孩子的位置设置为绝对位置，并且将其父位置设置为相对位置。（使用内联样式或https://material-ui.com/customization/css-in-js/ 无关紧要）然后在 Firefox 中，它将按 css 标准显示它应该显示的位置 - 相对于其直接父级的左、右等位置的孩子，但在 chrome（版本 70.0.3538.77 ）中，它显示相对于文档正文定位的孩子。

const DataTableFooter = ({totalCount, page, size, onChangePage, onChangeRowsPerPage}) => {
      return (
        <TableFooter>
          <TableRow
            style={{
              position: 'relative',
            }}>
            <TablePagination
              style={{
                position: 'absolute',
                bottom: 0,
                right: 0,
              }}
            />
          </TableRow>
        </TableFooter>
      );
    };

    export default DataTableFooter;

具有讽刺意味的是，谷歌搜索了大量关于 css 绝对定位错误的故事，我提出了关于在这种情况下 Firefox 不会相对于其父级定位子级的故事，而 chrome 会这样做，（我有相反的一天吗？）但没有任何用处。

【问题讨论】：

标签： javascript html css reactjs

【解决方案1】：

我似乎已经确定了问题所在。正如在我的问题中的示例代码中看到的那样，我正在处理表格，并且那里显示的反应元素将生成适当的 HTML TABLE 元素。（不是 div 样式为 table 等，而是实际 td tr 等）表格元素不会响应位置：chrome 中的相对，因为它在标准中未定义 https://www.w3.org/TR/CSS21/visuren.html#choose-position

' 'position:relative' 对 table-row-group 的影响，表头组、表页脚组、表行、表列组、 table-column、table-cell 和 table-caption 元素未定义。 '

【讨论】：