时间戳

首页 > 解决方案 > React 应用程序，绝对定位的子节点未相对于其相对定位的父节点定位（在 Chrome 中）

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

问题描述

我的 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 确实如此，（我有相反的一天或 hwat 吗？）但一无所获有用。

标签： javascripthtmlcssreactjs

解决方案

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

' 'position:relative' 对 table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-column、table-cell 和 table-caption 的影响元素未定义。'

推荐阅读