gpt4 book ai didi

css - facebook messenger bot 使用 CSS 移动位置

转载 作者:太空宇宙 更新时间:2023-11-04 06:58:55 27 4
gpt4 key购买 nike

I am implementing a facebook messenger bot on a website and need to change its position (bottom at least) and potentially with JS on scroll too.

因为它是使用 <body> 实现的脚本我看不到如何添加将在其上激活的 CSS。我想条件 JS 甚至很难实现。

这是我尝试实现的最简单的 CSS 版本:

.fb_dialog {
bottom: 50px
}

最佳答案

CSS 位置

Positions有五个值:

静态的相对的固定的绝对粘性

首先设置您的 Position 属性和属性:Top、Bottom、Right、Left。我把你的课讲明白了

值的小解释

位置:静态;它不能移动,它被定位到普通页面。示例:

<style>.fb_dialog {
position: static;
Left:30px;
}
<style>

position:relative;如果你设置 right, left, bottom, top 属性,你的元素将调整远离正常位置示例:

<style>.fb_dialog {
position: relative;
left: 30px;

}
<style>

位置:固定;您的元素将保持在同一个位置,无论您放置多远,它都不会调整示例;

<style>.fb_dialog {
position: fixed;
bottom: 0;
right: 20;
}
<style>

position:absolute;元素必须使用 Position:Relative 定位;这使元素仅移动到相对位置但是如果你只使用 Position Absolute 而没有相对祖先,元素将在页面的视口(viewport)上移动。示例:

<style>.fb_dialog1 {
position: relative;
bottom:o;
right: 20px;
}

.fb_dialog{
position: absolute;
top: 80px;
right: 20;
}
</style>
Position:Sticky;

此位置将元素设置为在您滚动页面时保持不变。 Position 粘性值适用于升级版 Internet Explore 和 Safari示例:

<style>.fb_dialog {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
</style>

还有另一种使用 Css#idselector 放置 css 的方法。无论您使用什么元素,如 div , p等等。您可以使用 id 设置元素样式示例:

 <style> #fb_dialog {
position:absolute;
right: 20;
}
</style>

<p id="fb_dialog">some text here.</p>

关于css - facebook messenger bot 使用 CSS 移动位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52226404/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com