html - Css 在 vue 组件中使聊天框位于其他内容的前面

Question

我正在用 vuejs 开发一个聊天框，每当聊天框显示时它就会隐藏在网站内容后面。

这是我用过的代码

<template>
 <div class="chat-box">
    <div class="title-area">
        <div class="title">Chat with support</div>
        <div class="close-icon">X</div>
    </div>
    <div class="message-area">
         the message area
    </div>
    <div class="chat-input-area">
        <input type="text" class="form-control textarea-input" />
        <button class="btn btn-primary sendmessage-btn" >Send</button>
    </div>
</div>

<script>
   export default {

   }
</script>

风格

<style scoped="true" lang="css">
 .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%
 }

</style>

上面生成的图像如下:

如何让聊天框出现在最前面？

Answer 1

您是否尝试查看 z-index 属性？ https://www.w3schools.com/cssref/pr_pos_z-index.asp