html把后面的内容放到前面,html-使Vue组件中的其他内容位于聊天框前面的CSS

我正在vuejs中开发一个聊天框,并且只要该聊天框的显示隐藏在网站内容后面,便会在其中.

这是我使用的代码

Chat with support

X

the message area

Send

export default {

}

样式

.chat-box{

min-height: 270px;

width: 260px;

position: fixed;

right:0;

bottom: 0px;

color:#ffffff;

margin: 0px 10px 100px 0px;

background-color: #636b6f;

border-radius: 15px;

}

.title-area{

width:100%;

height: 35px;

border-top-left-radius:19px;

border-top-right-radius:19px;

text-align: center;

color:#ffffff;

font-size: 15px;

font-weight: bold;

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

}

.title{

float:left;

color:white;

margin: 5px 0px 0px 15px;

}

.close-icon{

font-weight: 900;

margin: 5px 15px 0px 0px;

float:right;

}

.chat-input-area{

bottom: 0px;

position: absolute;

height:40px;

padding: 10px;

margin-bottom: 10px;

}

.sendmessage-btn{

float:right

}

.textarea-input {

float: left;

width:74%

}

上面生成的图像如下：

如何使聊天框显示在前面？