如何将图标定位到特定的div

我试图在这里使用React Portal在不同的DOM位置插入Child元素（信息图标），以允许Child在视觉上脱离容器。

如您在图像中所看到的，提供的我的图标现在显示在标记为“ C”的视口区域中。但是我想在显示的数据框区域的右下角放置o。

我试图使用offsetTop，offsetwidth，offsetHeight，offsetLeft检索它的div（实际上是我想要的图标）位置，并将其应用于图标div（“ C”），以便它可以重新定位自己。但是它没有按预期工作。

关于哪里出问题的任何建议。 模态

import * as React from "react";
import * as ReactDOM from "react-dom";

type Props = {
  offsetTop: number;
  offsetLeft: number;
  offsetRight: number;
  offsetBottom: number;
}

class Modal extends React.Component<Props> {
    el: any;
  constructor(props) {
    super(props);
    // @ts-ignore
    this.el = document.createElement("div");
    this.el.style.left = this.props.offsetLeft + "px";
    this.el.style.top = this.props.offsetTop + "px";
    this.el.style.bottom = this.props.offsetBottom + "px";
    this.el.style.right = this.props.offsetRight + "px";
  }

  componentDidMount() {
    // @ts-ignore
    document.getElementById("modal-root").appendChild(this.el);
  }

  componentWillUnmount() {
    // @ts-ignore
    document.getElementById("modal-root").removeChild(this.el);
  }

  render() {
    return ReactDOM.createPortal(
      this.props.children,
      // @ts-ignore
      this.el
    );
  }
}

const ModalRoot = () => <div id="modal-root" />;

export { Modal, ModalRoot};

Section.tsx

const Section = (props) => (

    {props.info ? (
      <div  id="infoButton">                 // where i want my icon to be placed (insde "data" box in figure)[![Image][1]][1]
        {document.getElementById('infoButton') &&
          <Modal offsetTop={document.getElementById('infoButton').offsetTop} offsetLeft={document.getElementById('infoButton').offsetLeft} offsetBottom={document.getElementById('infoButton').offsetHeight} offsetRight={document.getElementById('infoButton').offsetWidth} >
            <Popup
              icon="info"
            >
              <div className="popup_contents">{props.info}</div>
            </Popup>
          </Modal>
        }
      </div>
    ) : (
      <Button
        className="iconbutton"
        icon="info"
        disabled={true}
      />
    )}
  </>
);