I want to place a div in an exact location on the page, via d3.js

For that, I use

let p = svg.createSVGPoint();
p.x = 0;
p.y = event_desc_pos_y;
let pt = p.matrixTransform(p.getScreenCTM());
let event_desc_div = d3.select('#event_description_div')
                            .style('top', pt.y + 'px')
                            .style('left', pt.x + 'px')
                            .style('width', width + 'px');

where I also have

#event_description_div {
  position:absolute;
  top: 50px;
  left:50px;
  overflow-y: scroll;
  height: 100px;
}

however, when I have scrolled down the page, this code seems to position this div wildly out of place.

I'm not sure what it is doing since it doesn't look like it places it within the page in absolute terms but also not even relatively on the viewed page (the position goes up in the page as I scroll down)

pt.y and pl.x do not change.

In any case, it doesn't work. The placement depends heavily on the scrolling.

How can I place the div always in the exact same place regardless of whether the page has been scrolled or not?