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仍然可以很好地工作。