Html 滚动时，我的div与标题重叠

我这样做是为了在滚动时标题跟随页面。但是当我滚动时，我的div（位于“colWrapper”部分）与标题重叠。 我尝试搜索类似的线程，但没有解决方案对我有效

---

只需为

标题和
顶行添加更高的
z索引

header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #B31B34;
  z-index:1000; /* just random high value for z-index will keep it on top */
  }

#toprow{
    position:fixed;
    width: 100%;
    height:35px;
    top:0;
    left:0;
    margin:0;
    padding:0;
    background-color: #333333;
    margin-top:50px;
    z-index:1000; /* Also here */
   }

更改css参数position:fixed为position:absolute或position:relative，根据需要为
标题添加更高的
z-index
和
#toprow
在这里工作正常。
/* header and top bar */

header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #B31B34;
  }

#toprow{
    position:fixed;
    width: 100%;
    height:35px;
    top:0;
    left:0;
    margin:0;
    padding:0;
    background-color: #333333;
    margin-top:50px;}

/* body */

body{
    background-color:#fff;background-image:url('bk5.jpg');}

/* buttons */
a #homeBtn span{ 
    background:url(home.png) no-repeat;
    padding-left: 25px;
    background-position: 0px 0px;
    background-size: contain;}

#homeBtn{
    font-size:1em;
    outline:none;
    background:none;
    border:none;
    cursor: pointer;
    color:#fff;
    }

#loginBtn, #joinBtn{
    color:white;
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 20px;
    padding: 0.5em 1.4em 0.5em;
    -webkit-border-radius: .5em; 
    -moz-border-radius: .5em;
    border-radius: .5em;
    border-style:none;
    float:right;
    margin-top:10px;
    background-color:red;
}

a #loginBtn span{ 
    background:url(soccer.png) no-repeat;
    padding-left: 25px;
    background-position: 0px 0px;
    background-size: contain;}

#loginBtn{ margin-right:150px;}
#joinBtn{margin-right:5px;}

#homeDiv{
    float:left; margin-left:160px;}

/* sidebar */

ul{ list-style-type: none; margin:0; padding:0.5em;}
a{text-decoration: none; font-size:1.1em; }

.menu {
    line-height:30px; 
    border-bottom: 1px solid black;
    color:#fff;
    border:1px initial black;
    border-left: 1px solid black;
    display:block;}

#sideNav{

  width: 180px;
  margin-left:60px;
  float: left;
  display: inline;
  max-height:1900px;
  background-color:#B31B34;

}

#lazy{line-height:108px;}

/* three columns for images */

#colWrapper{
    margin-top:100px;
    border: 1px dotted red;
    height:750px;

    width:2100px;}
.longColumns{

    background-color:#fff;
    background: url('col1.png');
    opacity: 0.7;
    filter: alpha(opacity=40);
    border: 1px dotted black;
    float:left;
    width:375px;
    height:750px;

}


/* footer */
#footer {
    width: 1895px;
    height: 350px;
    background-color: #333333;
}

header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #B31B34;
  z-index:1000; /* just random high value for z-index will keep it on top */
  }

#toprow{
    position:fixed;
    width: 100%;
    height:35px;
    top:0;
    left:0;
    margin:0;
    padding:0;
    background-color: #333333;
    margin-top:50px;
    z-index:1000; /* Also here */
   }