React app, absolutely positioned child not positioned relative to its relatively positioned parent (in Chrome)

Question

I have a weird trouble in my React app. If I set a child's position to absolute and it's parent to relative.(Doesn't matter if using inline style or https://material-ui.com/customization/css-in-js/ ) Then in Firefox it will show it as it should by css standards - A child positioned left right etc. relative to its direct parent but in chrome (Version 70.0.3538.77 ) it shows the child positioned relative to the body of document.

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;

Ironically plenty of the google searches about css absolute positioning errors I did came up with stories about how Firefox will not position the child relative to its parent in such situation and chrome does,(do I have an oppsoite day or hwat?) but with nothing useful.

Answer 1

似乎您正在尝试设置组件元素的样式，而不是组件正在渲染的元素的样式。

Answer 2

I seem to have determined the problem. As is seen in the example code in my question I was dealing with tables and the react elements shown there will generate appropriate HTML TABLE elements. (Not divs styled as table etc but actual td tr etc.) The table elements will not respond to position:relative in chrome as it is undefined in standard https://www.w3.org/TR/CSS21/visuren.html#choose-position

' The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined. '