我的固定侧边栏被图像库滑块覆盖时出现问题。我正在使用bootstrap固定侧边栏布局和bxSlider作为图像滑块,我也尝试过使用lightSlider。尽管将侧边栏z-index设置为9999
,侧栏上的子菜单始终隐藏在滑块层下以下是代码结构:
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-sm-2 sidebar">
<ul class="nav-sidebar">
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</div>
<div class="col-sm-10 col-sm-offset-2" style="position: relative; z-index: 1;">
<div id="product-detail" class="row">
<div class="prod-img col-md-3">
<ul id="bxslider">
<li><img src="images/image.jpg>" /></li>
<li><img src="images/image.jpg>" /></li>
<li><img src="images/image.jpg>" /></li>
</ul>
</div>
</div>
</div>
</div>
</div>
侧边栏的CSS:
.sidebar {
position: fixed;
top: 0; bottom: 0; left: 0;
z-index: 99999;
display: block;
overflow-x: visible;
overflow-y: auto;
}
希望有人可以帮助我 非常感谢!
编辑: 这是jsFiddle链接:jsFiddle