如何修复底部div和顶部div固定位置上的可滚动内容的透明度问题

Question

我正在设计聊天框，并设置top div和bottom div的固定位置，并且在两者之间有一个div负责聊天问题的内容是：当内容超出滚动范围时，滚动将开始，但内容固定在底部在移动设备中显示为透明状态，当我检查该元素时，请有人帮助。

//Top div fixed position
.header {   
    border-bottom: 1px solid #c4c4c4;
    max-width:900px;
    left: 50%;
    transform: translate(-50%, 0);
    right:0px;  
    top:0px;   
    width:100%;   
    position: fixed;

}
//Bottom div fixed position
.type_msg {
    max-width:900px;
    border-top: 1px solid #c4c4c4;  
    left: 50%;
    transform: translate(-50%, 0);
    right:0px;  
    bottom:0px;   
    width:100%;   
    position: fixed;

}
//Content div with scroller
.msg_history {
max-width:900px;
left: 50%;
transform: translate(-50%, 0);
right:0px;  
top:78px;    
width:100%;   
position: fixed;
filter: alpha(opacity=100); 
height: 500px;  
overflow-y: auto;
}

这是我的代码的输出。预先感谢。

Answer 1

赋予z-index属性，该属性可以帮助显示输入文本和背景文本。 背景颜色：#fff; z-index：999;

class{
z-index:99;
background:#fff;}