我正在构建位于页面按钮上的简单聊天。当我单击打开聊天时,它会将样式更改为更大的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;
}
聊天.php
<div class="chat" id="chat">
<div class="head">
<img src="img/chat/chat.png" alt=""> 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>
设置始终位于幻灯片顶部的 z 索引
chat {
position:fixed;
right:0px;
bottom:0px;
height:24px;
width:400px;
z-index: 999999;
}
#chat{
z-index:999999;
}
提供@jogesh_piNe的代码将不起作用。脚本替换了".active"上的样式".chat",但使用 ID 仍然可以完美运行。