英雄图像

英雄图像

关注
发信
关注(28)粉丝(399)

javascript - 英雄图像幻灯片与固定导航栏重叠

我正在为一家小公司从头开始建立一个网站，以提高我的html/css/js技能，因此我想避免使用像bootstrap这样的框架。
有问题的站点有一个固定的导航栏和一个英雄图像滑块，但是我有一个问题，英雄图像每次改变时都会临时重叠导航栏。我在css中尝试了一些东西，但是到目前为止我还无法确定问题所在，您可以在这里看到：

var slideIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("headerimg");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > x.length) {slideIndex = 1}
  x[slideIndex-1].style.display = "flex";
  setTimeout(carousel, 5000);
}

body {
	margin: auto 0;
	/* background-color:rgb(231,232,233); */
	font-family: 'Open Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Lato', sans-serif;
}

h1 {
	font-size:2em;
}

nav {height:10vh;}

.mainnav {
	list-style:none;
	display:flex;
	margin: 0;
	background-color:white;
	font-size:1em;
	overflow:hidden;
	position:fixed;
	top:0;
	width:100%;
	justify-content: flex-end;
	/* opacity:0.5; */
	}

.navitem {
	padding-top:2%;
	padding-bottom:2%;
	padding-right:6%;
	padding-left:1%;
	transition: background-color 0.3s linear;
	}


.navitem:hover {
	background-color:red;
}

.navitem a {
	transition: color 0.3s linear;
	text-decoration:none;
	color:black;
	text-align:center;
}

.navitem a:hover {color:white;}

#tagline {
	text-align:center;
	font-family:"Lato";
	font-size:2em;
	margin-bottom:1%;
	color:black;
	background-color:#ededed;
	padding-bottom:0.5%;
	padding-top:0.2%;
	border-top:3px solid red;
}

.title {
	margin-right:auto;
	padding: 1% 6% 1% 1%;
	margin-top:auto;
	margin-bottom:auto;
	}

.title img {
	height:50px;
	padding-right: 10px;
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .2}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .2}
  to {opacity: 1}
}


.headerimg {
	max-height:400px;
	width:100%;
}

<!DOCTYPE html>
<html>
<head>
	<title>Testing Testing</title>
	<link rel="stylesheet" type="text/css" href="./style.css">

	<meta charset="UTF-8">
</head>
<body>
	<nav>
		<ul class="mainnav">
			<li class="title"><img src="logo1.png"><p style="float:right;"><strong>Testing Testing</strong></p></li>
			<li class="navitem"><a href="#">Início</a> </li>
			<li class="navitem"><a href="about.html">Sobre nós</a> </li>
			<li class="navitem"><a href="produtos.html">Produtos</a> </li>
			<li class="navitem"><a href="contactos.html">Contactos</a> </li>
		</ul>
	</nav>
	<header style="width:100%;text-align:center;">
		<img class="headerimg fade" src="http://demo.qodeinteractive.com/central/wp-content/uploads/2013/05/header.jpg" >
		<img class="headerimg fade" src="https://www.freewebheaders.com/wordpress/wp-content/gallery/clouds-sky/clouds-sky-header-2063-1024x300.jpg" >
		<img class="headerimg fade" src="https://cdn.pixabay.com/photo/2016/08/05/09/31/banner-1571858__340.jpg" >
	</header>
	<div id="tagline">
		<strong>LOREM IPSUM</strong>
	</div>

<script type="text/javascript" src="./scripts.js"></script>
</body>
</html>

CodePen
我很感激你对此有任何深入的见解，特别是像我所说的，这对我来说主要是一个学习练习。提前多谢！

最佳答案

就这样在.mainnav上设置z-index属性。
您可以查看此站点以获取z-index描述：https://www.w3schools.com/cssref/pr_pos_z-index.asp

var slideIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("headerimg");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > x.length) {slideIndex = 1}
  x[slideIndex-1].style.display = "flex";
  setTimeout(carousel, 5000);
}

body {
	margin: auto 0;
	/* background-color:rgb(231,232,233); */
	font-family: 'Open Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Lato', sans-serif;
}

h1 {
	font-size:2em;
}

nav {height:10vh;}

.mainnav {
	list-style:none;
	display:flex;
	margin: 0;
	background-color:white;
	font-size:1em;
	overflow:hidden;
	position:fixed;
	top:0;
	width:100%;
	justify-content: flex-end;
	/* opacity:0.5; */
	z-index:1; /* add z-index to force always on top, as overlapped elements doesnt have this property */
	}

.navitem {
	padding-top:2%;
	padding-bottom:2%;
	padding-right:6%;
	padding-left:1%;
	transition: background-color 0.3s linear;
	}


.navitem:hover {
	background-color:red;
}

.navitem a {
	transition: color 0.3s linear;
	text-decoration:none;
	color:black;
	text-align:center;
}

.navitem a:hover {color:white;}

#tagline {
	text-align:center;
	font-family:"Lato";
	font-size:2em;
	margin-bottom:1%;
	color:black;
	background-color:#ededed;
	padding-bottom:0.5%;
	padding-top:0.2%;
	border-top:3px solid red;
}

.title {
	margin-right:auto;
	padding: 1% 6% 1% 1%;
	margin-top:auto;
	margin-bottom:auto;
	}

.title img {
	height:50px;
	padding-right: 10px;
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .2}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .2}
  to {opacity: 1}
}


.headerimg {
	max-height:400px;
	width:100%;
}

<!DOCTYPE html>
<html>
<head>
	<title>Testing Testing</title>
	<link rel="stylesheet" type="text/css" href="./style.css">

	<meta charset="UTF-8">
</head>
<body>
	<nav>
		<ul class="mainnav">
			<li class="title"><img src="logo1.png"><p style="float:right;"><strong>Testing Testing</strong></p></li>
			<li class="navitem"><a href="#">Início</a> </li>
			<li class="navitem"><a href="about.html">Sobre nós</a> </li>
			<li class="navitem"><a href="produtos.html">Produtos</a> </li>
			<li class="navitem"><a href="contactos.html">Contactos</a> </li>
		</ul>
	</nav>
	<header style="width:100%;text-align:center;">
		<img class="headerimg fade" src="http://demo.qodeinteractive.com/central/wp-content/uploads/2013/05/header.jpg" >
		<img class="headerimg fade" src="https://www.freewebheaders.com/wordpress/wp-content/gallery/clouds-sky/clouds-sky-header-2063-1024x300.jpg" >
		<img class="headerimg fade" src="https://cdn.pixabay.com/photo/2016/08/05/09/31/banner-1571858__340.jpg" >
	</header>
	<div id="tagline">
		<strong>LOREM IPSUM</strong>
	</div>

<script type="text/javascript" src="./scripts.js"></script>
</body>
</html>

关于javascript - 英雄图像幻灯片与固定导航栏重叠，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55282372/

10-11 13:54
Powered by LMLPHP ©2025 英雄图像 0.025317