在 div 内滚动时,我编写了一个由图像和 h2 组成的横幅,以粘贴到所述 div 的顶部。当位于 div 顶部时,横幅上方没有间隙,但当滚动时,其上方会出现 1px 间隙,从而可以在横幅上方看到文本。有想法该怎么解决这个吗?这是我的 CSS:
#popup {
position: relative;
visibility: hidden;
width: 85%;
height: 65%;
background-color: #fff;
color: #444;
text-align: center;
border-radius: 6px;
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%,-49%);
padding: 5%;
padding-top: 0;
overflow: auto;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: x-large;
overflow-x: hidden;
}
#popup #banner {
margin-left: -6%;
margin-right: -6%;
position: sticky;
display: flex;
justify-content: space-between;
top: 0;
z-index: 2;
background-color: #EEE;
padding-left: 5%;
}
#banner h2 {
display: inline;
}
#popup #exit {
display: inline;
height: 75px;
top: 3%;
right: 3%;
transform: translate(-5%,10%);
}
我尝试了顶部的负边距,这没有效果,并删除了 h2 上的填充和边距,这对我的问题没有任何改变。
要解决粘性横幅的 1px 间隙问题,请设置 box-sizing: border-box;为你的粘性元素。这可确保内边距和边框包含在元素的总尺寸中,从而可能解决间距问题。 我需要查看您的更多代码来告诉我。