定位聊天栏（JavaScript）

我把一个脚本代码放在我的网站上，聊天栏出现在页面底部，但我需要把它放在一个特定的位置，比如x=55y=90的坐标

你有什么办法来处理这件事吗

这是提供者给出的代码

提前谢谢

<div class = "chat">
<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/.../default';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->
</div>

var Tawk_API=Tawk_API | |{}，Tawk_LoadStart=new Date（）；
（功能（）{
var s1=document.createElement（“脚本”），s0=document.getElementsByTagName（“脚本”）[0]；
s1.async=true；
s1.src=https://embed.tawk.to/.../default';
s1.字符集='UTF-8'；
s1.setAttribute（'crossorigin'，'*'）；
s0.parentNode.insertBefore（s1，s0）；
})();

---

该聊天代表您的css代码，请提前感谢

尝试将此代码添加到您的css中

main {
      position: fixed;
      top: 50px !important;
      right: 0 !important;
      box-sizing: content-box;
    }

---

我建议您使用CSS样式。到目前为止，你有两个选择

1。使用固定位置

.chat {
  position: fixed;
  top: 90px;
  left: 55px;
}

请记住，如果你这样做，你的酒吧将始终坚持其立场。这是因为你的位置是固定的，也就是说这个位置是相对于你的窗户的

2。使用绝对位置

.chat {
  position: fixed;
  top: 90px;
  left: 55px;
}

通过绝对定位，您可以实现完全相同的效果，除了相对于其父容器定位元素。所以您可以将容器放置在一个绝对位置，您也可以将聊天栏放置在其中

.chat {
  position: absolute;
  top: 90px;
  left: 55px;
}

---

在您的情况下，我建议使用绝对值，因为固定值通常用于页眉和页脚。无论如何，您可以自由探索适合您需要的款式。

我也使用了Tawk服务，无法花费大量时间尝试定制外部款式。我会解释我的发现

Tawk开发者有自己的反馈工具，他们已经有了一些关于如何灵活调整气泡的位置或样式的要求：请参见，和

简单地重写CSS样式不会像我前面提到的那样起作用，因为它们通过注入加载的js代码的每个

iframe

属性强制样式<代码>样式在浏览器的HTML解析器逻辑中的优先级高于CSS。他们还使用

！重要信息

我理解他们的推理——重要的是确保风格在任何环境（即网站）中的一致性

您可以在加载时使用JS代码。例如，我使用了Reactjs模块，在加载外部源代码时，您可以在该模块上使用自定义回调函数。然后你可以做类似的事情

以强制更新样式。但是下面是脚下的石头：在滚动到页面底部或顶部时，脚本强制更新同一小部件的样式。因此，我对正在加载的源代码进行了未整理/修饰，可以向您保证，在这个级别上要做的工作太多了

---

结论：我将气泡的自定义位置设置为视口的中间，而不是底部。难看，但可以临时修复。

聊天吧是什么意思？你是说聊天窗口吗？比如facebook聊天。它在页面的底部，但我需要改变它的位置。首先，非常感谢你，但它不起作用。首先，感谢你的回复，我两个都试过了，但都不起作用。你还有其他想法吗？嘿，NewPHPer，你介意用一把小小提琴提供一些HTML标记，包括你的JavaScript代码吗？帮助会容易得多。我更新了代码，也许我的divsWell有问题。。。您有没有关于最终html外观的信息？我实际上不知道您正在使用什么库或框架，也不知道生成了什么标记。@NewPHPer这是因为Tawk懒散地加载自己的CSS样式，并在

iframe

s上使用

style

属性-它比CSS样式具有更高的优先级，所以我想弄清楚如何定位气泡，使其向上移动更多像素。其中一个解决方案是使用纯JS来

document.querySelectorAll（“iframe[title='chat widget']）

，然后对它们的样式做一些处理，但是当页面滚动到底部时，它并不能解决另一个问题-然后，

tawkchat容器

突然将这些样式更新回初始样式。烦人，但Tawk开发者已经要求更改此。。。