导航栏与滑块重叠

问题描述 投票：0回答：2

我有一个带有导航栏和滑动栏的测试网站。我正在尝试让侧边栏堆叠在导航栏上或调整导航栏的大小。

我认为页脚很好，因为它的位置是固定的。我希望导航栏嵌套在滑动条下方或调整大小。

我使用的是 bootstrap 3 和 JS。 这是代码

function openNav() {
  document.getElementById("Sidebar").style.width = "300px";
  document.getElementById("main").style.marginLeft = "0px";
}

function closeNav() {
  document.getElementById("Sidebar").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}
html {
  font-size: 100%;
}

body {
  font-size: 15px;
  font-size: 0.9375rem;
  font-family: "Open sans", Helvetica, Arial, sans-serif;
  color: #666666;
  padding: 0;
  background-color: #cccccc;
}

.topspace {
  margin-top: 40px;
}

.navbar {
  border-width: 1px 0;
  -webkit-border-radius: 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0;
  -moz-background-clip: padding;
  border-radius: 0;
  background-clip: padding-box;
  width: 100%;
  margin-top: 20%;
}

.navbar.stick {
  position: fixed;
  top: 0;
  left: 0;
  opacity: .85;
}

.navbar-collapse {
  -webkit-border-radius: 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0;
  -moz-background-clip: padding;
  border-radius: 0;
  background-clip: padding-box;
  font-family: "Open sans", Helvetica, Arial, sans-serif;
  font-weight: 300;
  text-transform: uppercase;
}

.navbar-collapse .navbar-nav {
  float: none;
  margin: 0 auto;
  text-align: center;
}

.navbar-collapse .navbar-nav>li {
  float: none;
  display: inline-block;
}

.navbar-collapse .navbar-nav>li>a {
  padding: 20px 30px;
}

.dropdown ul.dropdown-menu {
  top: 85%;
  text-align: left;
}

.dropdown ul.dropdown-menu>li>a {
  padding: 5px 30px;
}

.navbar-default {
  background-color: #ffffff;
  border-color: #cccccc;
}

.navbar-default .navbar-nav>li>a {
  color: #454545;
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
  color: #000000;
  background-color: #ffffff;
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
  color: #000000;
  background-color: #ffffff;
}

.navbar-default .dropdown ul.dropdown-menu>li>a {
  color: #454545;
}

.navbar-default .dropdown ul.dropdown-menu>li>a:hover {
  background-color: #eeeeee;
  color: #000000;
}

.navbar-default .navbar-toggle {
  border-color: #666666;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #ffffff;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #333333;
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #cccccc;
}

.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
  background-color: #ffffff;
  color: #000000;
}

.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidebar a:hover {
  color: #f1f1f1;
}

.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidebar {
    padding-top: 15px;
  }
  .sidebar a {
    font-size: 18px;
  }
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.no-icons.min.css" rel="stylesheet">

<body class="home">

  <header id="header">
    <nav class="navbar navbar-default navbar-sticky">
      <div class="container-fluid">

        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
          <a href="test.php" type="button" class="btn btn-default btn-xs">
            <span href="google.com" class="lang-lg" lang="en"></span>
          </a>
        </div>

        <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1">

          <ul class="nav navbar-nav">
            <li><a href="index.html">Home</a></li>
            <li><a onclick="openNav()">Open</a></li>
          </ul>

        </div>
      </div>
    </nav>
  </header>

  <aside>
    <div id="Sidebar" class="sidebar">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
      <a href="#">Info</a>
      <a href="#">Info</a>
    </div>
  </aside>
</body>

javascript html css twitter-bootstrap
2个回答
0
投票

对于我的问题，这可以通过添加 z-index: 0; 来解决到.navbar。

.navbar {
    ......
    ......
    z-index: 0;
}

也许这会对某人有帮助。

0
投票

为了使 

z-index
产生任何影响，您需要确保该位置不是 静态。任何静态定位的元素都具有以下特征。

元素根据正常流程定位 文档。 top、right、bottom、left 和 z-index 属性没有 影响。这是默认值。

由于设置 

position: relative
与 
position: static
类似，只不过它允许您更改元素的位置，这将是此处合适的选项。

在上面的代码片段中，如果您找到带有 

id
或 
header
的元素并应用一些看起来像这样的 CSS，您最终会看到标题位于旁边的导航菜单后面。

#header {
  position: relative;
  z-index: 1;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.