CSS 相对位置超过固定如何解决这个问题？

Question

基本上，经过研究后，我发现文本框中的文本从底部开始并向上而不向下溢出的唯一方法是设置绝对位置和相对位置。

但这样做它就会越过我的固定导航栏。

有办法解决这个问题吗？

#ChatName{
    width: 99%;
    height: 20px;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 5px;
    border: #000000 solid 1px;

}
#ContentWrapper{
    width: 100%;
    height: 600px;
}
#ChatBig {
    float: left;
    width: 45%;
    height: 600px;
    margin-left: 20px;
    overflow: hidden;
    border: #000000 solid 1px;
    resize:none;
    position: relative;

}
#ChatMessages{
    width: 100%;
    bottom: 55px;
    margin-bottom: 5px;
    resize:none;
    font-size: 16px;
    font-weight: normal;
    overflow:hidden;
    position: absolute;

}
#ChatText{
    width: 100%;
    height: 50px;
    resize:none;
    overflow:hidden;
    position: absolute;
    bottom: 0;

}
#ChatText:focus{outline: none;}

#RightContent{
    width: 25%;
    height: 600px;
    float: right;
    margin-right: 10px;
    border: #000000 solid 1px;
    overflow: hidden;
}
#Online{
    width: 100%;
    height: 100px;
    overflow: hidden;
    text-align: center;

}
#IsOnline{
    width: 100%;
    height: 24px;
    border: #000000 solid 1px;
}
#IsActive{
    width: 100%;
    height: 24px;
    border: #000000 solid 1px;

}
body {
    background-color: #edf0f5;
}
#Holder {
    width: 100%;
}
.UserNameS{
    color: #7CB9E8;
}
.UserNameS:hover{text-decoration:underline; cursor: pointer;}
#nav{
    width:100% !important;
    height: 50px;
    background-color: orange;
    box-shadow: 0 4px 2px -2px gray;
    position:fixed;
    padding:0;
    margin:0;
    overflow: hidden;

    top:0;
    left:0;
}
#UserNav{
    float: right;
    width: 33%;
    height: 50px;
    text-align: right;
    margin-right: 30px;
    margin-top: 10px;
}
#CreteChat{
    width: 33%;
    height: 50px;
    float: right;
    margin-top: 10px;

}
#Logo{
    float: left;
    width: 30%;
    height:50px;
    margin-left: 10px;
    margin-top: 10px;
}

#ChatCreate {
    width: 300px;

}
#Wrapper {
    width: 100%;
    height: 720px;
}

我希望它是这样的

但是当它像这样时，看看我的文本栏如何消失并且文本超出了框边框

Answer 1

我的第一个猜测是给出#ChatText一个z-index值，也许是-1。