我有一个垂直引导侧边菜单,可以响应地切换到水平。
我遇到的问题是,侧边菜单一旦变为水平状态就会隐藏在其他元素后面,请参见示例,其中侧边菜单会隐藏在小型设备上的文本后面:
<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/