Question

以下是小提琴的链接：https://jsfiddle.net/LpLp75zm/

问题在于，虽然我已经为顶栏（红色部分）分配了position:fixed属性，但当我向下滚动时，它不会伴随侧面导航菜单。

<!DOCTYPE html>
<html>
<head>
<style>
* { margin:0;padding:0;}

div.container {
position: relative;
}

div.topbar {
  background-color: #f44336;
  font-size: 25px;
  height: 50px;
  width: 100%;
  z-index: 1;
  position: fixed;
}

a.left-top-bar {
    font-family: ISOCPEUR;
  background-color: #0e0e0e;
  color: whitesmoke;
  width: 200px;
  text-align: center;
  font-size: 30px;
  padding: 5px 0 15px 0;
  height: 30px;
  position: fixed;
  text-decoration: none;  
  z-index: 2;
}

  div.sidenav {
  background-color: #b5b5b5; 
  width: 200px;
  height: 100%;
  position: fixed;
  top: 50px;  
  z-index: 3;  
}


ul {
width: 200px;
background-color: #b5b5b5;
list-style-type: none;
}

li.main a {
padding: 10px 0 10px 15px;
font-family: Calibri;
display: block;
text-decoration: none;
color: white;
} 

li.main a:hover {
background-color: #343434;
}

div.center {
background-color: #a1b9a4;
position: absolute;
left: 200px;
top: 50px;
height: 1000px;
width: 1141px; 
padding-top: 25px;
padding-left: 25px;
z-index: 2;
}

div.dropbtn {
height: 23px;
padding: 10px 0 10px 15px;
font-family: Calibri;
display:block;
text-decoration: none;
color: white;
}

div.dropbtn:hover {
background-color: #343434;
}

div.dropdown-content {
display: none;
background-color: #343434;
width: 200px;
height: 129px;
text-align: center;
position: relative;
left: 185px;
bottom: 29px;
}

a.dropdown {
text-decoration: none;
color: white;
font-family: Calibri;
display: block;
padding: 12px 0 12px 0;
}

a.dropdown:hover {
background-color: #b5b5b5;
}

div.dropbtn:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="container">
    <div class="topbar"></div>
<a class="left-top-bar" href="https://www.wikipedia.org" target="_blank">This Website </a>

<div class="sidenav"> 
    <ul>
        <li class="main"><a href="https://www.google.com">Home</a></li>
        <li class="main"><a href="https://www.facebook.com">Facebook</a></li>
        <li class="main"><a href="https://www.quora.com">Quora</a></li>
        <li class="main"><a href="https://www.reddit.com">Reddit</a></li>
        <li class="dropdown">
        <div class="dropbtn">Dropdown
            <div class="dropdown-content">
                <a class="dropdown" href="#">Text<br></a>
                    <a class="dropdown" href="#">Link 2<br></a>
                    <a class="dropdown" href="#">Link 3<br></a>
        </div>
        </div>
        </li>
</div>


<div class="center"> 
<h1>Test text</h1>
<p style="padding-top: 10px";>
Lorem Ipsum
</p>
</div>



</div>
</body>
</html>

Answer 1

问题不在于红色条向上滚动，而是绿色.center div向上滚动。

解决方法：将.center div的z-index降低到1以下，使其显示在红色条后面。

＆＃13;

* {
  margin: 0;
  padding: 0;
}
div.container {
  position: relative;
}
div.topbar {
  background-color: #f44336;
  font-size: 25px;
  height: 50px;
  width: 100%;
  z-index: 1;
  position: fixed;
}
a.left-top-bar {
  font-family: ISOCPEUR;
  background-color: #0e0e0e;
  color: whitesmoke;
  width: 200px;
  text-align: center;
  font-size: 30px;
  padding: 5px 0 15px 0;
  height: 30px;
  position: fixed;
  text-decoration: none;
  z-index: 2;
}
div.sidenav {
  background-color: #b5b5b5;
  width: 200px;
  height: 100%;
  position: fixed;
  top: 50px;
  z-index: 3;
}
ul {
  width: 200px;
  background-color: #b5b5b5;
  list-style-type: none;
}
li.main a {
  padding: 10px 0 10px 15px;
  font-family: Calibri;
  display: block;
  text-decoration: none;
  color: white;
}
li.main a:hover {
  background-color: #343434;
}
div.center {
  background-color: #a1b9a4;
  position: absolute;
  left: 200px;
  top: 50px;
  height: 1000px;
  width: 1141px;
  padding-top: 25px;
  padding-left: 25px;
  z-index: 0;
  /* here */
}
div.dropbtn {
  height: 23px;
  padding: 10px 0 10px 15px;
  font-family: Calibri;
  display: block;
  text-decoration: none;
  color: white;
}
div.dropbtn:hover {
  background-color: #343434;
}
div.dropdown-content {
  display: none;
  background-color: #343434;
  width: 200px;
  height: 129px;
  text-align: center;
  position: relative;
  left: 185px;
  bottom: 29px;
}
a.dropdown {
  text-decoration: none;
  color: white;
  font-family: Calibri;
  display: block;
  padding: 12px 0 12px 0;
}
a.dropdown:hover {
  background-color: #b5b5b5;
}
div.dropbtn:hover .dropdown-content {
  display: block;
}

＆＃13;

<div class="container">
  <div class="topbar"></div>
  <a class="left-top-bar" href="https://www.wikipedia.org" target="_blank">This Website </a>

  <div class="sidenav">
    <ul>
      <li class="main"><a href="https://www.google.com">Home</a>
      </li>
      <li class="main"><a href="https://www.facebook.com">Facebook</a>
      </li>
      <li class="main"><a href="https://www.quora.com">Quora</a>
      </li>
      <li class="main"><a href="https://www.reddit.com">Reddit</a>
      </li>
      <li class="dropdown">
        <div class="dropbtn">Dropdown
          <div class="dropdown-content">
            <a class="dropdown" href="#">Text<br></a>
            <a class="dropdown" href="#">Link 2<br></a>
            <a class="dropdown" href="#">Link 3<br></a>
          </div>
        </div>
      </li>
    </ul>
  </div>


  <div class="center">
    <h1>Test text</h1>
    <p style="padding-top: 10px" ;>
      Lorem Ipsum
    </p>
  </div>
</div>

＆＃13;

Answer 2

尝试将div用于div.topbar

的z-index值

div.topbar {
    background-color: #f44336;
    font-size: 25px;
    height: 50px;
    position: fixed;
    width: 100%;
    z-index: 3;
}

有固定职位的问题

2 个答案: