Javascript 基于另一个div标记动态更改div的位置

我有一个相关的图标，我应该聊天泡泡。如果图标位置不固定，那么如何显示与图标相关的气泡聊天。如何根据图标的位置动态更改泡泡聊天的位置

#logowrap{
填充：8px；
光标：指针；
背景颜色：灰色；
宽度：4rem；
身高：4rem；
边界半径：50%；
文本对齐：居中；
字体系列：“SF Pro常规显示，-苹果系统，BlinkMacSystemFont，Helvetica Neue，苹果彩色表情符号，无衬线”；
位置：绝对位置；
右：50%；
最高：50%；
动画：脉冲1.5s缓进缓出无限二者；
边框：2倍纯色灰色；
}
.聊天室容器{
位置：绝对位置；
底部：53%；
右：50%；
}
.chat-bubble-2{
宽度：170px；
高度：56px；
背景色：#6B8E23；
文本对齐：居中；
填充：0.2rem；
线高：58px；
颜色：#fff；
边界半径：27px；
位置：相对位置；
字体系列：富兰克林哥特式中字体、Arial窄字体、Arial无衬线字体；
}
.chat-bubble-2：：之后{
内容：''；
位置：绝对位置；
高度：24px；
宽度：26px；
边框底部：2px实心#6B8E23；
右边框：2px实心#6B8E23；
左边框：0px实心#6B8E23；
边框顶部：0px实心#6B8E23；
最高：100%；
左：74%；
变换：旋转（45度）；
利润上限：-22px；
背景#6B8E23；
}

JS-Bin
我还在这里！！

将您的

#聊天容器

放入

#logowrap

，然后设置

#logowrap

显示：相对

#logowrap{
填充：8px；
光标：指针；
背景颜色：灰色；
宽度：4rem；
身高：4rem；
边界半径：50%；
文本对齐：居中；
字体系列：“SF Pro常规显示，-苹果系统，BlinkMacSystemFont，Helvetica Neue，苹果彩色表情符号，无衬线”；
位置：相对位置；
左：50%；
顶部：500px；
动画：脉冲1.5s缓进缓出无限二者；
边框：2倍纯色灰色；
}
.聊天室容器{
位置：绝对位置；
底部：90%；
右：40%；
}
.chat-bubble-2{
宽度：170px；
高度：56px；
背景色：#6B8E23；
文本对齐：居中；
填充：0.2rem；
线高：58px；
颜色：#fff；
边界半径：27px；
位置：相对位置；
字体系列：富兰克林哥特式中字体、Arial窄字体、Arial无衬线字体；
}
.chat-bubble-2：：之后{
内容：''；
位置：绝对位置；
高度：24px；
宽度：26px；
博尔德

JS-Bin
我还在这里！！