问如何定位元素w.r.t，就像文本框中的Grammarly按钮一样？

EN

const OFFSET = 5;

const button = document.createElement("button");

[...document.getElementsByTagName("textarea")].forEach(textarea => {
  // get the dimensions of each element, then position the buttons accordingly
  const { top, left, height, width } = textarea.getBoundingClientRect();
  const b = button.cloneNode(true);
  document.body.appendChild(b); // it's necessary to first append the element so CSS wil be applied, otherwise the dimensions will be 0
  
  const { width: bWidth, height: bHeight } = b.getBoundingClientRect();
  b.style.top = (
    (
      top + window.scrollY + height
    ) - OFFSET - bHeight
  ) + "px";
  b.style.left = (
    (
      left + window.scrollX + width
    ) - OFFSET - bWidth
  ) + "px";
  
  // if you want to do stuff with the button relative to that text area
  b.addEventListener("click", () => doSomething(textarea));
});

function doSomething(textarea) {
  console.log(textarea.value);
}

/* just for the demo */
textarea {
  display: block;
}

button {
  color: white;
  background-color: lightgreen;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.3);
  
  /* necessary button CSS: */
  position: absolute;
}

html {
  position: relative;
}

<textarea>text...</textarea>
<textarea>text...</textarea>
<textarea>text...</textarea>
<textarea>text...</textarea>
<textarea>text...</textarea>
<textarea>text...</textarea>
<textarea>text...</textarea>
<textarea>text...</textarea>
<textarea>text...</textarea>
<textarea>text...</textarea>
<textarea>text...</textarea>
<textarea>text...</textarea>
<textarea>text...</textarea>
<textarea>text...</textarea>
<textarea>text...</textarea>
<textarea>text...</textarea>
<textarea>text...</textarea>
<textarea>text...</textarea>
<textarea>text...</textarea>
<textarea>text...</textarea>

 <div class="wrapper">
  <textarea></textarea>
  <button></button>
</div>

.wrapper {
    position: relative;
    width: max-content;
  }
  textarea {
    width: 15rem;
    height: 10rem;
  }
  button {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    width: 1rem;
    height: 1rem;
  }

const textarea = document.querySelector("textarea");
const button = document.querySelector("button");
function setPosition() {
  const left = textarea.offsetLeft;
  const top = textarea.offsetTop;
  const width = textarea.offsetWidth;
  const height = textarea.offsetHeight;

  button.setAttribute(
    "style",
    "position: absolute; top:" +
      (top + height - 30) +
      "px; left: " +
      (left + width - 30) +
      "px;"
  );
}
setPosition();

new ResizeObserver(setPosition).observe(textarea);

#myScrollContainer {
  height: 150px;
  overflow: auto;
}
#myTextareaContainer {
  width: 300px;
  position: relative;
}
#myTextarea {
  width: 300px;
}
#myOverlay {
  position: absolute;
  right: 25px;
  bottom: 10px;
}

<div id="myScrollContainer">
<div id="myTextareaContainer">
<form>
<textarea rows="5" cols="50" id="myTextarea">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</textarea>
</form>
<div id="myOverlay">
<button>Me!</button>
</div>
</div>
.<br />
(scroll down)<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
The end
</div>