Question

当我向上滚动时，我试图让导航栏下方的div元素进入导航栏。目前，当我向上滚动时，内容会越过导航栏。我尝试在stackoverflow中使用一些解决方案但不知何故它不适用于我的情况。非常感谢你的帮助。

这是HTML代码：

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
alpha.2/css/bootstrap.min.css" integrity="sha384-
y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" 
crossorigin="anonymous">

<meta name="viewport" content="width=device-width, initial-scale=1">

<div class = "container-fluid">
  <div class = "navigation-bar" id = "nav-bar">
    <div class = "w3-top">
    <div class = "w3-bar w3-border w3-card-4" >
      <a href = "#" class="w3-bar-item w3-button">About</a>
      <a href = "#" class="w3-bar-item w3-button">Portfolio</a>
      <a href = "#" class="w3-bar-item w3-button">Contact</a>
     </div>
    </div>
  </div>
  <body>
  <div class = "Intro" id = "myIntro">
   <div class="w3-panel w3-card-4">
    <h4 class = "header" align = "center"> My workspace</h4>
    <p>
     <table style="width:90%">
       <tr>
         <td align = "center"><i>Aspiring developer</i></td>
         <td align = "center"><i>Tech enthusiast</i>
         <td align = "center"><i>Loves fishing</i>
       </tr>
       </table>
      </p>
   <hr>
  </div>
 </div>

这是当前的css代码：

.navigation-bar{
  z-index: 1;
}
body {
  padding: 50px;
  z-index: -1;
}
h4 {
  padding-top: 20px;
}

您可以在此处查看发生的情况：https://codepen.io/chawin/pen/EWBaxo

Answer 1

实际上，在您的代码中，rgba(0,0,0,0)元素位于导航栏下方。它似乎是＆＃34;过去＆＃34;因为导航栏的背景颜色是透明的（.navigation-bar .w3-top { background: white; }）。要解决此问题，您只需将导航栏的背景颜色定义为白色：

 group   min(rank)  min(rank)   min   sum

title   t_no       t_descr     rank    stores
A       1          a           1       1000
B       1          a           1       1000
B       2          b           2       800
C       2          b           2       800
D       1          a           1       1000
D       2          b           2       800
F       4          d           4       500
E       3          c           3       700

请查看CodePen。

Answer 2

只需使用z-index属性。

默认值为0，因此如果其他元素尚未更改，您只需将导航栏的z-index设置为1，它就会显示在所有其他元素之上。

**注意：要使z-index起作用，必须使用定位。

即：position: fixed

您需要正确地重写页面。在玩完之后，您可以看到栏开始显示在文本http://prntscr.com/ettdzp上，但是您已经完成了添加具有偏移的填充等内容，以及使用外部样式表。将divs置于身体外的自由空间也不是一个好主意。

Answer 3

对于水平导航栏

.navigation-bar{ 
     position: fixed;
     width: 100%;
 } 
body { 
     margin: 0;
}

Answer 4

您可以尝试z-index和固定位置的组合。还要确保没有其他元素的z-index高于导航栏。

#nav-bar{ 
     position: fixed;
     z-index:99;
 }

Answer 5

请尝试：

.w3-top{
  z-index: 10;
  background: white;
  left: 0;
}

滚动时如何使div元素在导航栏下运行

5 个答案: