html - Bootstrap : bring fixed horizontal nav bar above other elements

标签 html css bootstrap-4

我有一个垂直引导侧边菜单,可以响应地切换到水平。

我遇到的问题是,侧边菜单一旦变为水平状态就会隐藏在其他元素后面,请参见示例,其中侧边菜单会隐藏在小型设备上的文本后面:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
  <head></head>

<body style = "padding-top:55px">

  <nav class="navbar navbar-expand-sm navbar-light fixed-top bg-light">
    <a class="navbar-brand" href="#">Fixed navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2">
      <ul class="navbar-nav mx-auto text-md-center text-left">
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
      </ul>
    </div>
  </nav>


  <div class="container">
    <div class="row">
      <div class="col-12 col-md-4">
        <div class="position-fixed bg-dark">
          <div class="row">
            <ul class="nav overflow-auto flex-md-column flex-nowrap">
              <li class="nav-item">
                <a class="nav-link" href="#">Link 123</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Link 123</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Link 123</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Link 123</a>
              </li>
            </ul>
          </div>
        </div>

      </div>


      <div class="col-12 col-md-8">
        <div class="row">
          <div class="d-flex">
            <h1>Some text</h1>
          </div>
        </div>

      </div>



    </div>
  </div>




</body>

</html>

https://codepen.io/coffeeeecup/pen/ZEYpBJO

此行为的原因很可能是位置固定的。但我需要这个属性,因为侧边菜单在滚动时应该保持在固定位置。

如何保证元素在子菜单下方固定位置排列?

提前致谢

最佳答案

为位置固定的元素赋予z-index: 1。并根据固定元素的高度对内容进行填充。

关于html - Bootstrap : bring fixed horizontal nav bar above other elements,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59331540/

相关文章:

html - 选择时更改输入字段的颜色

html - 将搜索栏移动到 Bootstrap 3 中的特定位置

javascript - 使用 javascript 进行打印时限制每页的行数

javascript - 如何修复 Internet Explorer 列宽

html - 将表单添加到导航栏中的新行

html - CSS 背景图像按 html 中的内容扩展

html - 将输入类型设置为数字使输入宽度变短

php - CSS calc(percent - pixels) 被浏览器解释为 calc(percent - percent)

html - 在断点上使用 Bootstrap 4 的网格自动调整列大小时,一旦浏览器变小,它们就会被永久忽略

html - Bootstrap 4 Navbar Flex 与 Brand Center 的突破