div chat always on top

Question

I'm building one simple chat located on the button of the page. When I click on open chat, it change the style to bigger div. But my problem is when I have the slider on the page, the chat is behind the slider. My question is how can I make the div chat always on top.

my 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;
}

the 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

Set the z-index that always keep on the top of slides

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

Answer 2

#chat{
    z-index:999999;
}

Code that gave @jogesh_piNe will not working. Script replaces style ".chat" on ".active", but with the ID will still work perfectly.