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。

Answer 2

旧帖子，但是如果您体内有很多东西并希望导航保持在顶部，则马克的答案可能会成问题，因此最好给#nav较高的z-index （例如100）。