Question

我正在从头开始为一家小公司建立一个网站，以提高我的html / css / js技能，因此，我希望避免使用诸如bootstrap之类的任何框架。

有问题的站点具有固定的导航栏和英雄图像滑块，但是我遇到的问题是，每次更改时，英雄图像会暂时与导航栏重叠。我已经在CSS中尝试了一些操作，但是到目前为止，我仍然无法确定问题所在，您可以在此处查看：

!printexception

!pe

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); 
}

CodePen

我很高兴对此有任何见解，尤其是对解释为什么发生的解释，就像我说的那样，这主要是我的学习活动。提前非常感谢！

Answer 1

只需在.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>

Answer 2

之所以发生这种情况，是因为固定位置实质上从文档流中删除了该元素，从而导致其下方的项目向上移动。

您需要考虑固定导航先前占用的空间。给标题元素padding-top：56px;或body元素padding-top：56像素；解决这个问题。

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

2 个答案: