它不允许我使用css设置我的<div>样式

Question

我已经开始了一个编码项目，但是当我试图设计我的div时，我遇到了麻烦，这是我的代码到目前为止。

除了.chat规则之外，以下所有CSS规则都已应用。

我做错了什么？

var main = function() {
    $('.the-icon-menu').click(function() {
        $('.menu').animate({
            left: "0px"
        }, 200);
        $('body').animate({
            left: "300px"
        }, 200);
    });
    $('.the-icon-close').click(function() {
        $('.menu').animate({
            left: "-300px"
        }, 200);
        $('body').animate({
            left: "0px"
        }, 200);
    });
};
$(document).ready(main);

body {
    left: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
    background-color: #000000;
}
.menu {
    background-color: #FF0000;
    left: -300px;
    height: 100%;
    position: fixed;
    width: 300px;
}
.menu ul {
    border-top: 2px dotted #CE9429;
    list-style: none;
    margin: 0;
    padding: 0;
}
.menu li {
    border-bottom: 2px dotted #CE9429;
    line-height: 45px;
    padding-bottom: 3px;
    padding-left: 20px;
    padding-top: 3px;
}
.menu a {
    color: #CE9429;
    font-size: 15px;
    text-decoration: none;
    text-transform: uppercase;
}
.the-icon-close {
    cursor: pointer;
    padding-left: 10px;
    padding-top: 10px;
}
.the-icon-menu {
    background-color: #FF0000;
    cursor: pointer;
    width: 10px;
    height: 10000px;
}
.chat {
    background-color: #FF0000;
    left: 300px;
    height: 100px;
    position: fixed;
    width: 300px;
}

<div class="menu">
    <div class="the-icon-close">
        <img src="close.png" />
    </div>
    <ul>
        <li><a href="#">Games</a></li>
        <li><a href="#">History of computer games</a></li>
        <li><a href="#">Coding</a></li>
        <li><a href="#">Help forums</a></li>
    </ul>
</div>
<div class="the-icon-menu">
</div>
<div class="the-chat-menu">
    hi
</div>
<div class="chat">
    <div class="the-chat-close">
    </div>
    <form>
        <input type="text" />
        <input type="submit" value="Submit" />
    </form>
</div>

Answer 1

您只需设置顶部或底部位置，例如top: 0; div上的.chat。

JSFiddle

给聊天div一个上/下位置，你应该看到它出现。