How can I get the position right and bottom in React-CodePudding

I want to get the right and bottom position of the green box relative to the blue box I want the result, which is the bottom and right position, to be printed on the console.

I do not know how I can do this, please help us, thanks

I put my code link at the bottom

https://codesandbox.io/s/infallible-bassi-nxi609?file=/src/App.js

CodePudding user response：

I'm using all offsets (which is related to the parent box) within useEffect to get current element's position

useEffect(() => {
    const element = document.getElementById("child");
    console.log({
      top: element.offsetTop,
      right:
        element.parentElement.offsetWidth -
        (element.offsetLeft   element.offsetWidth),
      bottom:
        element.parentElement.offsetHeight -
        (element.offsetLeft   element.offsetHeight),
      left: element.offsetLeft
    });
  }, []);

You can check this sandbox

CodePudding user response：

https://codesandbox.io/s/funny-noether-0ckk0r?file=/src/App.js This should work.

EDIT: I added logic to show how it calculates the offsets.