幻灯片显示越过导航栏和导航栏元素定位

-13

我正在尝试将“主页”，“新闻”等元素的块移动到中间位置或将其放置在导航栏中我想要的位置。我尝试使用ul部分中的“左”，但它正在移动整个导航栏。幻灯片显示越过导航栏和导航栏元素定位

CSS section 
<html> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
<head> 

<!-- nav section --> 
<style> 

body {margin:0;} 
body { 
    background-color: #393939; 
} 

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: black; 
    position: fixed; 
    top: 0; 
    width: 100%; 
    left:0px; 

} 

li { 
    float: left; 

} 

li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 22px 22px; 
    text-decoration: none; 
} 

li a:hover:not(.active) { 
    background-color: #111; 
} 

.active { 
    background-color: #4CAF50; 
} 

#wrapper { 
width: 720px; 
margin: auto; 

} 

#slideshow { 
padding: 15px 40px; 

    } 

h1{ 
    font-size: 40px; 
    margin-top:35%; 
    margin-left:-27%; 
    font-style: italic; 
    font-size: 28px; 
    font-variant: small-caps; 
    overflow: hidden; 

} 
h1:after { 
background-color: gray; 
content: ""; 
display: inline-block; 
height: 1px; 
position: static; 
vertical-align: middle; 
width: 70%; 
    left: 0.5em; 
margin-right: -50%; 
} 

#images{ 
    float: left; 
    margin: 0px 0px 10px -150px;} 
    } 

</style> 
</head> 
<body> 

<div id="wrapper"> 
<ul> 
    <li><a class="active" href="#home">Home</a></li> 
    <li><a href="#news">News</a></li> 
    <li><a href="#contact">Trailers</a></li> 
    <li><a href="#about">Series</a></li> 
</ul> 

<!-- end of nav section --> 


HTML SECTION 
    <!-- slideshow --> 
    <div id="slideshow"> 
    <h2 class="w3-center">Manual Slideshow</h2> 

    <div class="w3-content" style="max-width:750px;position:relative;left:-200px;height:200px;"> 

    <img class="mySlides" src="images/1.jpg" style="width:100%;height:380px;"> 
    <img class="mySlides" src="images/2.jpg" style="width:100%"> 
    <img class="mySlides" src="images/3.jpg" style="width:100%"> 
    <img class="mySlides" src="images/8.jpg" style="width:100%"> 

    <a class="w3-btn-floating" style="position:absolute;top:45%;left:0" onclick="plusDivs(-1)">></a> 
    <a class="w3-btn-floating" style="position:absolute;top:45%;right:0" onclick="plusDivs(1)"><</a> 
    </div> 

    <script> 
    var slideIndex = 1; 
    showDivs(slideIndex); 

    function plusDivs(n) { 
     showDivs(slideIndex += n); 
    } 

    function showDivs(n) { 
     var i; 
     var x = document.getElementsByClassName("mySlides"); 
     if (n > x.length) {slideIndex = 1} 
     if (n < 1) {slideIndex = x.length} 
     for (i = 0; i < x.length; i++) { 
     x[i].style.display = "none"; 
     } 
     x[slideIndex-1].style.display = "block"; 
    } 

    </script> 
    <!-- end of slideshow --> 
    </div> 

    </body> 

    </html>

我的网站：http://bcns2k16mt.net16.net/BCNS_16A_FT_160312/

来源

2016-09-25 Matthieu Topize

使用z-index什么你试过吗？ –

欢迎来到Stack Overflow！你的问题的全部内容必须在**你的问题中**，而不仅仅是链接。链接腐烂，使问题及其答案在未来的人们中毫无用处，人们不应该离开现场去帮助你。在**问题中放置一个[mcve] **，最好使用Stack Snippets（'<>'工具栏按钮）使其可运行。更多：[*我怎么问一个好问题？*]（/帮助/如何问） –

请提供一些代码，而不是网站的链接。 –

原因导航变得波纹管幻灯片是因为你需要导航设置为一个更高的层z-index这应该做的伎俩。

上ul

ul { 
    ... 
    z-index: 5; 
}

来源

2016-09-25 16:56:31

ul上的z-index固定幻灯片放映问题:)谢谢 –

幻灯片显示越过导航栏和导航栏元素定位

回答

相关问题