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-index

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仍然可以完美运行。

div聊天总是排在最前面

2 个答案: