jquery - div 聊天总是在最前面

Question

我正在页面按钮上构建一个简单的聊天。 当我点击打开聊天时，它会将样式更改为更大的 div。 但我的问题是当我在页面上有 slider 时，聊天在 slider 后面。 我的问题是如何使 div 聊天始终位于顶部。

我的CSS:

.chat {
    position:fixed;
    right:0px;
    bottom:0px;
    height:24px;
    width:400px;
}
.active {
    position:fixed;
    right:0px;
    bottom:0px;
    height:424px;
    width:400px;
}
.head {
    background:#7f8c8d;
    padding-left: 3px;
    border-radius: 3px;
    color: #2c3e50;
    font-weight: bold;
}
.button {
    position:absolute;
    right:0px;
    cursor: pointer;
}
.conversation {
    background:white;
    width: 400px;
    height: 600px;
}

chat.php

<div class="chat" id="chat">
    <div class="head">
        <img src="img/chat/chat.png" alt="">&nbsp;Chat
        <img src="img/chat/open.png" alt="" class="button">
    </div>
    <div class="conversation">
        conversations here
    </div>
</div>
<script>
    $(document).ready(function() {
        var closed = true;
        $(".button").click(function() {
            if (closed) {
                $("#chat").attr('class', 'active');
                closed = false;
            }
            else {
                $("#chat").attr('class', 'chat');
                closed = true;
            }
        });
    });
</script>

Answer 1

设置始终保持在幻灯片顶部的 z-index

chat {
    position:fixed;
    right:0px;
    bottom:0px;
    height:24px;
    width:400px;
    z-index: 999999;
}