div聊天始终排在最前面

Question

我正在建立一个简单的聊天，位于页面的按钮上。 当我单击打开聊天时，它将样式更改为更大的div。 但是我的问题是，当页面上有滑块时，聊天在滑块后面。 我的问题是如何使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索引

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

Answer 2

#chat{
    z-index:999999;
}

提供@jogesh_piNe的代码将无法正常工作。 脚本会在“ .active”上替换样式“ .chat”，但使用ID仍可以正常工作。