html - 如何解决底部 div 和顶部 div 固定位置的可滚动内容的透明度问题

Question

我正在设计聊天框并设置顶部 div 和底部 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;}