相对于绝对父级中的绝对定位元素的定位元素

Question

我想将教程消息放置在HTML元素的位置。例如，“点击此处”指向特定元素。我正在将SCSS用于CSS和jQuery。

元素.target-element（黄色的“>”箭头）位于绝对定位的父级.target-element-container（白色气泡）内。我想将.tutorial-pointer定位为指向.target-element（黄色的“>”箭头）：

.game-wrapper {
    position: relative;
    margin: 0 auto;
    .wrist-watch { // the wrist watch image container
        position: absolute;
        bottom: 20px;
        left: 20px;
        .target-element-container { // the speech bubble
            width: 200px;
            min-height: 88px;
            background: #fff;
            margin-bottom: 20px;
            padding: 20px;
            position: absolute;
            right: -102px;
            top: -166px;

            .target-element { // the yellow ">" arrow
                position: absolute;
                right: 4px;
                bottom: 4px;
                width: 25px;
                height: 25px;
            }
        }
    }
}

教程指针（我将要移动以指向各种目标元素的元素）具有以下类：

.tutorial-pointer { // the blue "Click" arrow
    position: absolute;
    top: 0;
    left: 0;
}

我想将教程箭头（.tutorial-pointer）移到.target-element的位置，所以我正在使用.offset()。

设置箭头位置：

let elPosition = $('.target-element').offset();

let top = elPosition.top;
let left = elPosition.left;

$('.tutorial-pointer').css({
    top: `${top}px`,
    left: `${left}px`,
});

问题：在不同的屏幕尺寸上，定位似乎不起作用。在较小宽度的屏幕上，箭头的位置非常理想：

在更大宽度的屏幕上，它向右偏移太远：

如果放置.target-element时得到.tutorial-pointer的偏移量，为什么屏幕宽度很重要？