Блог

Главная - Вопросы по программированию - Слайд-шоу с изображением героя, перекрывающееся с фиксированной панелью навигации

Слайд-шоу с изображением героя, перекрывающееся с фиксированной панелью навигации

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я создаю веб-сайт для небольшой компании с нуля, чтобы улучшить свои навыки работы с 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

Я был бы признателен за любое понимание этого, особенно за объяснение того, почему это произошло, поскольку, как я уже сказал, для меня это в первую очередь учебное упражнение. Заранее большое спасибо!

Ответ №1:

просто установите свойство z-index в .mainnav следующим образом. вы можете проверить этот сайт на наличие описания z-индекса: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>

Комментарии:

1. Это сработало отлично, я загляну на страницу w3schools для получения дополнительной информации об этом свойстве. Большое спасибо!

Ответ №2:

Это происходит потому, что фиксированная позиция по существу удаляет элемент из потока документов, в результате чего элементы под ним перемещаются вверх.

Необходимо учитывать пространство, которое ранее занимал фиксированный навигатор. Предоставление элементу заголовка отступа-top: 56px; или элементу тела отступа-top: 56px; устраняет проблему.

Комментарии:

1. Спасибо за объяснение того, почему это происходит (имеет смысл!), Однако добавление отступов решает проблему только тогда, когда страница находится в начальной позиции — если вы прокрутите вниз так, чтобы фиксированный заголовок перекрывал изображения героя, он все равно «мигает» на странице при смене изображений, если я чего-то не упускаю. Я попытался добавить отступы как к телу, так и к классу .headerimg.

2. Ага, понял. Дополнение в сочетании с исправлением z-индекса должно работать.