Html 向上滚动时如何使div元素位于导航栏下_Html_Css_Twitter Bootstrap

Html 向上滚动时如何使div元素位于导航栏下

html css twitter-bootstrap

Html 向上滚动时如何使div元素位于导航栏下,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,当我向上滚动时，我试图使导航栏下方的div元素位于导航栏下方。当前，当我向上滚动时，内容会越过导航栏。我尝试在stackoverflow中使用一些解决方案，但不知何故，它对我的案例不起作用。非常感谢您的帮助这是HTML代码： <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://maxcdn.bootstrap

当我向上滚动时，我试图使导航栏下方的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>

您可以在这里看到发生了什么：

只需使用

z-index

属性即可

默认值为0，因此如果其他元素未更改，您只需将导航栏的

z-index

设置为

，它将显示在所有其他元素之上

**注意：要使z索引工作，必须使用定位

i、 e:

位置：固定

你需要正确地重写你的页面。在播放之后，您可以看到该条开始显示在文本上，但您已经完成了添加具有偏移量的填充以及使用外部样式表等操作。将

div

放置在身体外部的自由空间中也不是一个好主意。

简单地说，使用

z-index

属性

默认值为0，因此如果其他元素未更改，您只需将导航栏的

z-index

设置为

，它将显示在所有其他元素之上

**注意：要使z索引工作，必须使用定位

i、 e:

位置：固定

你需要正确地重写你的页面。在播放之后，您可以看到该条开始显示在文本上，但您已经完成了添加具有偏移量的填充以及使用外部样式表等操作。将

div

放置在身体外部的自由空间也不是一个好主意。

实际上，在你的代码中，

div

元素位于导航栏下。因为导航栏的背景色是透明的（

rgba（0,0,0,0）

），所以它看起来像是“覆盖”。要解决此问题，只需将导航栏的背景色定义为白色：

.navigation-bar .w3-top {
  background: white;
}

请检查。

实际上，在您的代码中，

div

元素位于导航栏下。因为导航栏的背景色是透明的（

rgba（0,0,0,0）

），所以它看起来像是“覆盖”。要解决此问题，只需将导航栏的背景色定义为白色：

.navigation-bar .w3-top {
  background: white;
}

请检查。

中的水平导航栏

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

用于水平导航栏

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

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

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

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

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

请尝试：

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

请尝试：

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

你的问题解决了吗？如果是，也许你可以“接受”其中一个答案？你的问题解决了吗？如果是，也许你可以“接受”其中一个答案？