Question

我有一个垂直引导菜单，可以相应地切换到水平菜单。

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

<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

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

如何确保元素在位置固定的子菜单下排列？

预先感谢

Answer 1

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

引导程序：将固定的水平导航栏置于其他元素之上

1 个答案: