div chat всегда сверху

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 не будет работать. Сценарий заменяет стиль «.chat» на «.active», но с идентификатором все равно будет работать отлично.