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

我做了它，所以滚动时我的标题跟在页面的后面。但是当我滚动时，我的div（位于'colWrapper'部分）与标题重叠。我试过寻找类似的线程，但没有解决方案为我工作。滚动时，我的div与我的标题重叠

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'> 
    <link href='https://fonts.googleapis.com/css?family=Iceland' rel='stylesheet' type='text/css'> 
    <link rel="stylesheet" type="text/css" href="test.css"> 
</head> 

<body> 
    <header id="navbar"> 
     <div id="loginDiv"> 
      <a href="#"><button type="button" id="loginBtn"><span>LOGIN</span></button></a> 
     </div> 
     <div id="joinDiv"> 
      <a href="#"><button type="button" id="joinBtn"><span>JOIN NOW</span></button></a> 
     </div> 
    </header> 

    <div id="toprow"> 
     <div id="homeDiv"> 
      <a href="#"><button type="button" id="homeBtn"><span>HOME</span></button></a> 
     </div> 
    </div> 

    <div id="sideNav"> 
     <ul> 
      <li><a class="menu" href="#"><a></li><hr> 
      <li><a class="menu" href="#"> Account<a></li><hr> 
      <li><a class="menu" href="#"> Live Events <a></li><hr> 
      <li><a class="menu" href="#"> Football<a></li><hr> 
      <li><a class="menu" href="#"> Baseball<a></li><hr> 
      <li><a class="menu" href="#"> Soccer<a></li><hr> 
      <li><a class="menu" href="#"> Basketball<a></li><hr> 
      <li><a class="menu" href="#"> Hockey<a></li><hr> 
      <li><a class="menu" href="#"> MMA<a></li><hr> 
      <li><a class="menu" href="#"> eSports<a></li><hr> 
      <li><a class="menu" href="#"> Tennis<a></li><hr> 
      <li><a class="menu" href="#"> Cricket<a></li><hr> 
      <li><a class="menu" href="#"> Golf<a></li><hr> 
      <li><a class="menu" href="#"> Badminton<a></li><hr> 
      <li><a class="menu" href="#"> Handball<a></li><hr> 
      <li><a class="menu" href="#"> Rugby<a></li><hr> 
      <li><a class="menu" href="#"> Snooker<a></li><hr> 
      <li><a class="menu" href="#"> Table Tennis<a></li><hr> 
      <li><a class="menu" href="#"> Volleyball<a></li><hr> 
      <li><a id="lazy" href="#"><a><font color="#B31B34">LAZYSOLUTION</font></li><hr> 
     </ul> 
    </div> 
    <section id="colWrapper"> 
    <div class="longColumns"; id="colOne";></div> 
    <div class="longColumns"; id="colTwo";></div> 
    <div class="longColumns"; id="colThree";></div> 
    </section> 

</body> 
</html>

CSS：

/* 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; 
}

来源

2015-12-19 Calisto

更改CSS parametre位置：固定的位置是：绝对或位置：相对根据您的要求 – WisdmLabs

为'header'和'＃toprow'添加更高的'z-index' – bansi

它在这里工作正常。 https://jsfiddle.net/v8fycgy9/ – ketan

只需添加更高z-index为header和#toprow

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 */ 
    }

来源

2015-12-19 06:34:54 bansi

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

回答

相关问题