Javascript 当我用jquery动态点击按钮时，如何在页面的特定位置创建聊天框

我想要这个

但这一切都是正常的 它创建，但它出现在页面底部，我需要向下滚动才能找到它。。 我希望它出现在屏幕上显示的页面上

下面是我的代码

var div = $("<div>", {
  // "text":"I'm a new paragraph!",
  "class": "bat",
  "css": {
    "background": "#f7f7f7",
    "height": "350",
    "border": "10px solid #33A919",
    "width": "250px",
    "float": "right",
    "position": "relative",
    "top": "20vh",
    "border-top-left-radius": "10px",
    "border-top-right-radius": "10px"
  }
});
$("body").append(div);

$("<div>", {
  "class": "foo",
  "text": "Heading my name is khan",
  "css": {
    "color": "white",
    "background": "#33A919",
    "height": "30px",
    "line-height": "30px"
  }

}).appendTo(".bat");

$(".foo").after("<div class='msg' style='background: hotpink;height:250px;width: 250px;overflow-y: auto;'></div>");
$(".msg").after("<textarea placeholder='Type your message here!' style='background: white; height: 65px; width: 250px; margin-top: 4px;'></textarea>");

}

var div=$（“”{
//“文本”：“我是一个新段落！”，
“类”：“bat”，
“css”：{
“背景”：“F7F7”，
“高度”：“350”，
“边框”：“10px实心#33A919”，
“宽度”：“250px”，
“float”：“right”，
“位置”：“相对”，
“顶部”：“20vh”，
“边框左上半径”：“10px”，
“边框右上角半径”：“10px”
}
});
$（“正文”）。追加（div）；
$("", {
“类”：“foo”，
“文本”：“标题我的名字是汗”，
“css”：{
“颜色”：“白色”，
“背景”：“33A919”，
“高度”：“30px”，
“线条高度”：“30px”
}
}).附于（“.bat”）；
$（“.foo”）。在（“”）之后；
$（“.msg”）。在（“”）之后；
}

使用

位置：固定

"position": "fixed",
"bottom": "0",
"right": "0",

演示

var div=$（“”{
//“文本”：“我是一个新段落！”，
“类”：“bat”，
“css”：{
“背景”：“F7F7”，
“高度”：“350”，
“边框”：“10px实心#33A919”，
“宽度”：“250px”，
“float”：“right”，
“位置”：“固定”，
“底部”：“0”，
“右”：“0”，
“边框左上半径”：“10px”，
“边框右上角半径”：“10px”
}
});
$（“正文”）。追加（div）；
$("", {
“类”：“foo”，
“文本”：“标题我的名字是汗”，
“css”：{
“颜色”：“白色”，
“背景”：“33A919”，
“高度”：“30px”，
“线条高度”：“30px”
}
}).附于（“.bat”）；
$（“.foo”）。在（“”）之后；
$（“.msg”）。在（“”）之后
body{height:800px}
谢谢你，我想你的问题已经解决了……但请稍微解释一下，我无法清楚地理解……不客气。很长时间来解释，为了更好地理解你可以阅读关于css定位的文章