jquery - 防止 div 内容覆盖其他 div

Question

我已经用 css 和 div 构建了一个 html 布局。我有名为顶部(即标题)、左侧(用于页面链接)和中心(用于显示图像)的 div。

当我单击链接以在左侧显示图像时，我可能会得到比浏览器窗口大的图像，我需要在其中滚动。我可以滚动，但图像会超出顶部部分，看不到我的标题。我想做的是，顶部部分始终位于浏览器窗口上。当我在中心滚动图像时，如果它们超出了我的顶部 div，我喜欢隐藏穿过顶部 div 的部分。有没有办法在CSS中做到这一点？

#top {
height: 300px;
width: 100%;
position: fixed;
}

#left {


    padding:0;
    border: 0;
    width: 350px;
    overflow: scroll;
    float: left;
    position: fixed;
    top: 5px; 
    bottom:0px;
    min-height:950px;

}

#center1 {
margin-left:352px;
padding:0;
border: 0;
float: left;
position:static;
overflow: hidden;
display: block;
}

Answer 1

在标题上使用 z-index 属性并将其设置为 100 或 1000。Z-index 仅在您使用 position:relative, 时才有效position:absolute或位置:固定。

#top {
    height: 300px;
    width: 100%;
    position: fixed;
    z-index: 1000;
}