Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá! Estou iniciando na área de programação e estou com uma dúvida... foi passada uma atividade na faculdade em que fizemos um chatbot no ibm cloud e a segunda parte dessa atividade é criar uma pagina web com o chatbot incluso na mesma. Dai, gostaria de saber como posso colocar esse chatbot tipo flutuante no canto inferior da página web... lembrando que o ibm cloud fornece a url do chat criado
Olá, thalles!! Meu código CSS é esse:
.rodape{
width: 100%;
background-color: #007BFF;
}
.texto_rodape{
color: #FFF;
text-align: center;
}
.tamanho_slider{
height:400px;
}
#iframe {
top: -230px;
left: -25px;
position:relative;
width: 800px;
height: 1600px;
}
#container {
overflow: hidden;
height: 560px;
width: 750px;
position: relative;
}Segue exemplo:
CÓDIGO
<!DOCTYPE HTML>
<html>
<head>
<title> EXAMPLE </title>
<style type="text/css">
.chat {
background-color: #999999;
position: absolute;
padding: 5px 20px;
width: 10%;
bottom: 0;
right: 0;
}
.chat .status {
text-align: center;
}
.chat .status span {
text-transform: uppercase;
font-weight: bold;
color: #FFFFFF;
}
</style>
</head>
<body>
<div class="footer"></div>
<div class="chat">
<div class="status">
<span>Online</span>
</div>
</div>
</body>
</html>
Caso o mesmo fique abaixo de algum elemento, utilize
o *z-index*
**LINKs**
**[POSITION](https://www.w3schools.com/css/css_positioning.asp)**
**[Z-INDEX](https://www.w3schools.com/cssref/pr_pos_z-index.asp)**eu coloco o codigo do meu chat onde dentro disso ai?
Posta o código, mas é basicamente
CSS: