Question

我做了它，所以我的标题在滚动时跟随页面。但是当我滚动时，我的div（位于'colWrapper'部分）与标题重叠。我尝试搜索类似的线程，但没有解决方案适合我。

<!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;
}

Answer 1

只需为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 */
   }

滚动

1 个答案: