如何让侧边导航浮动在全宽滑块上？
如何让侧边导航浮动在全宽滑块上？
提问于 2018-08-06 07:10:16
我试图让我的侧面导航浮动在我的网页顶部的全宽滑块的顶部，当我在网页上放置一个滑块时，我侧面导航的导航按钮变得不可点击尝试z-index方法它似乎不起作用，任何建议都会非常感谢提前。
<header>
<!-- sidebar starts-->
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn hvr-grow-rotate" onclick="closeNav()">×</a>
<h3 class="nav-title">test</h3>
<li><a href="index.html"><span class="fa fa-home nav-icon"> Home</span></a></li>
<li><a href="#"><span class="fas fa-store nav-icon"> About</span></a></li>
<li><a href="#"><span class="fas fa-cut nav-icon"> Services</span></a></li>
<li><a href="#"><span class="far fa-images nav-icon"> Gallery</span></a></li>
<li><a href="#"><span class="fas fa-comments nav-icon"> Reviews</span></a></li>
<li><a href="#"><span class="fas fa-map-marked-alt nav-icon"> Location</span></a></li>
<li><a href="#"><span class="fas fa-envelope nav-icon"> Contact Us</span></a></li>
<h5 class="nav-title-Socials">Our Socials</h5>
<ul class="icons">
<li class="facebook-icon hvr-bounce-in"><a href="#"><i class="fab fa-facebook color-facebook"></i></a></li>
</ul>
</div>
<div id="main" class="text-right">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span>
</div>
</header>
<body>
<div class="">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1200x400/cccccc/ffffff">
<div class="carousel-caption">
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
</div>
</div><!-- End Item -->
<div class="item">
<img src="http://placehold.it/1200x400/999999/cccccc">
<div class="carousel-caption">
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
</div>
</div><!-- End Item -->
<div class="item">
<img src="http://placehold.it/1200x400/dddddd/333333">
<div class="carousel-caption">
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
</div>
</div><!-- End Item -->
<div class="item">
<img src="http://placehold.it/1200x400/999999/cccccc">
<div class="carousel-caption">
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div><!-- End Item -->
</div><!-- End Carousel Inner -->
<ul class="nav nav-pills nav-justified">
<li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">About<small>Lorem ipsum dolor sit</small></a></li>
<li data-target="#myCarousel" data-slide-to="1"><a href="#">Projects<small>Lorem ipsum dolor sit</small></a></li>
<li data-target="#myCarousel" data-slide-to="2"><a href="#">Portfolio<small>Lorem ipsum dolor sit</small></a></li>
<li data-target="#myCarousel" data-slide-to="3"><a href="#">Services<small>Lorem ipsum dolor sit</small></a></li>
</ul>
</div><!-- End Carousel -->
</div>
/* Nav CSS */
.sidenav {
z-index : 99999;
height: 100%;
width: 0;
top: 0;
right: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
opacity: 0.9;
letter-spacing: 1.5px;
background: #a2a9b4;
position: absolute;
clear: both;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
transition: 0.3s;
color: white;
}
.sidenav .closebtn {
position: absolute;
top: 5px;
right: 15px;
font-size: 36px;
margin-left: 50px;
color: #fff;
background-color: rgba(66, 66, 66, 0.5);
padding: 0px 14px;
border-radius: 5px;
}
#main {
transition: margin-right 0.5s;
padding: 16px;
float: right;
}
#main span {
position: fixed;
top: 15px;
right: 15px;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
padding: 0px 10px;
border-radius: 5px;
}
.nav-title{
font-family: 'fiolex_girls';
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 32px;
color: #818181;
display: block;
transition: 0.3s;
color: white;
}
/* = slider
----------------------------------------------- */
#myCarousel .nav a small {
display:block;
z-index: -98;
}
#myCarousel .nav {
background:#eee;
}
#myCarousel .nav a {
border-radius:0px;
}
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginRight = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginRight = "0";
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51698911
复制相关文章
相似问题
腾讯云开发者
