Z-индекс или переполнение: видимые не работают в наложении IMG на две секции? - PullRequest
Новая
       35

Z-индекс или переполнение: видимые не работают в наложении IMG на две секции?

0 голосов
/ 19 мая 2019

Так что я сейчас работаю над разделом меню моего сайта. В верхней части этого раздела у меня есть изображение буррито, которое я хочу выделить в верхней части раздела меню и наложить поверх раздела о нас. Я попробовал z-index для тега img и сделал overflow: видимый в родительском контейнере. Не работал? Есть идеи? 

const ham = document.querySelector('.nav-box');
const menu = document.querySelector('.menu');
const menuClose = document.querySelector('#menu-close');

ham.addEventListener('click', function() {
	ham.classList.add('ham-open');
	menu.style.marginLeft = '50px';
})

menuClose.addEventListener('click', function() {
	ham.classList.remove('ham-open');
	menu.style.marginLeft = '-700px';

})




window.sr = ScrollReveal();

sr.reveal('.info', {
	duration: 2000,
	origin: 'bottom'
})
html, body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.header {
	background: url(img/mex-9.jpg);
	width: 100%;
	height: 100vh;
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
	display: flex;
}

.nav-wrap {
	flex-basis: 40%;
}

.nav-wrap i {
	color: white;
	font-size: 2rem;
	position: absolute;
	right: -33px;
	top: 0px;
	transition: all .1s ease;
}

.nav-wrap i:hover {
	cursor: pointer;
	transform: scale(1.15);
}

.nav-box {
	margin-left: 50px;
	margin-top: 100px;
	max-width: 70px;
	cursor: pointer;
	position: fixed;
	z-index: 10;
}

.b1, .b2, .b3 {
	width: 70px;
	height: 8.5px;
	border-radius: 5px;
	background-color: #fff;
	margin-bottom: 10px;
	transition: all .15s ease;
}

.b1 {
	background-color: #56ff47;
}

.b3 {
	background-color: #ff4c4c;
}

.ham-open .b1 {
	background-color: #56ff47;
	transform: translateY(100px);
	position: relative;
	z-index: 1;
}

.ham-open .b2 {
	transform: translateY(81.5px);
	width: 110px;
	position: relative;
	left: 60px;
	z-index: 0;
}

.ham-open .b3 {
	background-color: #ff4c4c;
	transform: translateY(63px);
	width: 140px;
	position: relative;
	left: 160px;
	z-index: 2;
}

.menu {
	display: flex;
	border-left: 8px solid #56ff47;
	flex-direction: column;
	background-color: #fff;
	margin-left: -700px;
	width: 292px;
	padding-top: 10px;
	padding-bottom: 10px;
	position: fixed;
	border-radius: 5px;
	top: 225px;
	transition: all .15s;
	z-index: 10;
}

.menu a {
	text-decoration: none;
	color: limegreen;
	font-family: 'Kumar One Outline';
	font-size: 2.3rem;
	text-align: center;
	margin-top: 12px;
	margin-bottom: 12px;
	transition: all .5s ease;
}

a:hover {
	color: #007001;
}

.info-wrap {
	flex-basis: 60%;
}

.info {
	font-family: 'Cedarville Cursive';
	color: white;
	font-weight: bold;
	font-size: 4.5rem;
	text-align: center;
	margin-top: 60px;
}

.logo-wrap {
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.logo-wrap div {
	font-family: 'Staatliches';
	color: white;
	font-size: 13rem;
	font-weight: bold;
	letter-spacing: 10px;
	margin-bottom: -5rem;
	position: relative;
	margin-left: auto;
	margin-right: auto;

}



/*------ABOUT------*/



.about-section {
	background-color: #17a832;
	width: 100%;
	position: relative;
}

.about-section h1 {
	text-align: center;
	font-size: 4.5rem;
	margin-top: 0;
	margin-bottom: 30px;
	padding-top: 15px;
	color: white;
	font-family: 'Cedarville Cursive';
	font-weight: bold;
}

.about-line {
	width: 350px;
	height: 5px;
	background-color: #edb12f;
	border-radius: 4px;
	position: absolute;
	top: 120px;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
}

.about-wrap {
	display: flex;
	padding-bottom: 150px;
}

.about-info, .image-slider-wrap {
	flex-basis: 50%;
}

.about-info p {
	color: white;
	font-family: 'Josefin Sans';
	font-size: 2rem;
	margin-left: 100px;
	margin-bottom: 0;
	margin-top: 0;
}

.image-slider {
	width: 650px;
	height: 400px;
	background-color: red;
	border-radius: 13px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

.image-slider i {
	color: white;
	font-size: 5rem;
	position: absolute;
	top: 50%;
	margin-top: -40px;
	transition: all .1s ease;
	cursor: pointer;
}

#left {
	transform: rotate(-90deg);
	left: -30px;
}

#right {
	transform: rotate(90deg);
	right: -30px;
}

#left:hover {
	transform: rotate(-90deg) scale(1.3);
}

#right:hover {
	transform: rotate(90deg) scale(1.3);
}


/*------MENU------*/


.menu-section {
	background-color: #edb12f;
	display: flex;
	width: 100%;
	top: -100px;
	position: relative;
	clip-path: polygon(0% 0%, 100% 3%, 100% 100%, 0% 100%);
	overflow: visible;
}

.menu-section h1 {
	font-size: 9.5rem;
	margin-top: 0;
	position: absolute;
	left: 200px;
	margin-top: -30px;
	padding-top: 15px;
	color: white;
	font-family: 'Cedarville Cursive';
	font-weight: bold;	
}

.menu-line {
	width: 450px;
	height: 5px;
	background-color: #17a832;
	border-radius: 4px;
	position: absolute;
	top: 190px;
	left: 195px;

}

.column-left, .column-right, .column-middle {
	flex-basis: 33.33%;
	margin-top: 230px;
	padding-bottom: 50px;
}

.column-left {
	display: flex;
	justify-content: flex-end;
}

.column-left #combo-platter:after {
	display: block;
	content: "beans and rice included";
	color: white;
	font-size: 1.5rem;
	font-family: 'Josefin Sans';
	margin-top: -25px;
}

.column-left h2:not(#combo-platter):after, .column-middle h2:after, .column-right h2:after {
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	background-color: white;
	border-radius: 3px;
	margin-top: -25px;
}

.column-middle {
	display: flex;
	justify-content: center;
}

.column-right {
	display: flex;
	justify-content: flex-start;
}

.column {
	min-width: 420px;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
}

.column h2 {
	display: inline-block;
	align-self: center;
	font-family: 'Cedarville Cursive';
	color: #17a832;
	font-size: 3rem;
}

.row {
	font-family: 'Josefin Sans';
	font-size: 1.5rem;
}

.row div {
	display: flex;
	justify-content: space-between;
}

.row div:after {
	display: inline-block;
	position: absolute;
	content: "";
	width: 100%;
	margin-top: 33px;
	border-top: 4px dotted black;
}

.row div p {
	background: #edb12f;
	overflow: hidden;
	position: relative;
	z-index: 1;
	padding: 0 6px; 
}

.burrito {
	position: absolute;
	transform: rotate(-45deg);
	top: -20px;
	right: 200px;
	width: 300px;
	height: 300px;
	z-index: 11;
	overflow: visible;
}

.menu-h2 {
	text-align: center;
}

.design-left, .design-right {
	position: absolute;
}

.design-right {
	right: 0;
	transform: rotate(180deg);
}

.arrow-right {
    width: 0; 
    height: 0; 
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent; 
    border-left: 60px solid green;
 	position: relative;
 	top: -10px;
}

.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;  
  border-right:60px solid limegreen;
  position: relative;
  top: 20px; 
}

.arrow-top {
    width: 0; 
    height: 0; 
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent; 
    border-left: 60px solid #20a04b;
 	position: relative;
 	top: -100px;
 	left: 60px;
}

.top-middle {
	position: relative;
	top: -110px;
}

.bottom-middle .arrow-left {
	top: -40px;
}

.bottom-middle .move {
	top: -70px;
}

.bottom {
	position: relative;
	top: -48px;
}

.bottom .arrow-left {
	top: -40px;
}


/*------HOURS------*/

.hours-section {
	background-color: green;
	width: 100%;
	height: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Mexican Restaurant</title>
	<link href="https://fonts.googleapis.com/css?family=Cedarville+Cursive|Josefin+Sans|Kumar+One+Outline|Staatliches" rel="stylesheet">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<header>
		<div class="header">
			<div class="nav-wrap">
				<div class="nav-box">
					<div class="b1"></div>
					<div class="b2"></div>
					<div class="b3"></div>
				</div>

				<div class="menu">
					<a href="#">Home</a>
					<a href="#">About</a>
					<a href="#">Menu</a>
					<a href="#">Hours</a>
					<a href="#">Contact</a>
					<a href="#">Location</a>
					<i class="fas fa-times" id="menu-close"></i>
				</div>
			</div>
			<div class="info-wrap">
				<p class="info">Authentic Mexican Food</p>

				<div class="logo-wrap">
					<div>YOUR</div>
					<div>LOGO</div>
					<div>HERE</div>
				</div>
			</div>
		</div>
	</header>
	<main>
		<div class="about-section">	
			<h1 class="about-h1">About Us</h1>
			<div class="about-line"></div>

			<div class="about-wrap">
				<div class="about-info">
					<p>	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias voluptas pariatur consequuntur, repellat, laborum, rerum ipsum illo excepturi mollitia reprehenderit saepe nisi praesentium voluptate ab repellendus quos impedit, soluta natus dolore. Praesentium debitis odio cupiditate, reprehenderit alias. Sequi non beatae tempore fugit quia? Ratione aspernatur, quidem voluptates dignissimos Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque quo iure accusantium cupiditate hic, iste ab laborum incidunt neque a nihil, veritatis cumque quaerat, id laboriosam, labore eaque delectus perspiciatis.</p>
				</div>

				<div class="image-slider-wrap">	
					<div class="image-slider">
						<i class="fas fa-sort-up" id="left"></i>
						<i class="fas fa-sort-up" id="right"></i>
					</div>
				</div>
			</div>
		</div>

		<div class="menu-section">
			<div class="design-left">
				<div class="design-wrap">
					<div class="top">
						<div class="arrow-left"></div>
						<div class="arrow-right"></div>
						<div class="arrow-top"></div>
					</div>

					<div class="top-middle">
						<div class="arrow-left"></div>
						<div class="arrow-right"></div>
					</div>

					<div class="bottom-middle">
						<div class="arrow-right"></div>
						<div class="arrow-left"></div>
						<div class="arrow-right move"></div>
					</div>

					<div class="bottom">
						<div class="arrow-left"></div>
						<div class="arrow-top"></div>
					</div>
				</div>

				<div class="design-wrap">
					<div class="top">
						<div class="arrow-left"></div>
						<div class="arrow-right"></div>
						<div class="arrow-top"></div>
					</div>

					<div class="top-middle">
						<div class="arrow-left"></div>
						<div class="arrow-right"></div>
					</div>

					<div class="bottom-middle">
						<div class="arrow-right"></div>
						<div class="arrow-left"></div>
						<div class="arrow-right move"></div>
					</div>

					<div class="bottom">
						<div class="arrow-left"></div>
						<div class="arrow-top"></div>
					</div>
				</div>

				<div class="design-wrap">
					<div class="top">
						<div class="arrow-left"></div>
						<div class="arrow-right"></div>
						<div class="arrow-top"></div>
					</div>

					<div class="top-middle">
						<div class="arrow-left"></div>
						<div class="arrow-right"></div>
					</div>

					<div class="bottom-middle">
						<div class="arrow-right"></div>
						<div class="arrow-left"></div>
						<div class="arrow-right move"></div>
					</div>

					<div class="bottom">
						<div class="arrow-left"></div>
						<div class="arrow-top"></div>
					</div>
				</div>

				<div class="design-wrap">
					<div class="top">
						<div class="arrow-left"></div>
						<div class="arrow-right"></div>
						<div class="arrow-top"></div>
					</div>

					<div class="top-middle">
						<div class="arrow-left"></div>
						<div class="arrow-right"></div>
					</div>

					<div class="bottom-middle">
						<div class="arrow-right"></div>
						<div class="arrow-left"></div>
						<div class="arrow-right move"></div>
					</div>

					<div class="bottom">
						<div class="arrow-left"></div>
						<div class="arrow-top"></div>
					</div>
				</div>

				<div class="design-wrap">
					<div class="top">
						<div class="arrow-left"></div>
						<div class="arrow-right"></div>
						<div class="arrow-top"></div>
					</div>
				</div>
			</div>

			<div class="design-right">
				<div class="design-wrap">
					<div class="top">
						<div class="arrow-left"></div>
						<div class="arrow-right"></div>
						<div class="arrow-top"></div>
					</div>

					<div class="top-middle">
						<div class="arrow-left"></div>
						<div class="arrow-right"></div>
					</div>

					<div class="bottom-middle">
						<div class="arrow-right"></div>
						<div class="arrow-left"></div>
						<div class="arrow-right move"></div>
					</div>

					<div class="bottom">
						<div class="arrow-left"></div>
						<div class="arrow-top"></div>
					</div>
				</div>

				<div class="design-wrap">
					<div class="top">
						<div class="arrow-left"></div>
						<div class="arrow-right"></div>
						<div class="arrow-top"></div>
					</div>

					<div class="top-middle">
						<div class="arrow-left"></div>
						<div class="arrow-right"></div>
					</div>

					<div class="bottom-middle">
						<div class="arrow-right"></div>
						<div class="arrow-left"></div>
						<div class="arrow-right move"></div>
					</div>

					<div class="bottom">
						<div class="arrow-left"></div>
						<div class="arrow-top"></div>
					</div>
				</div>

				<div class="design-wrap">
					<div class="top">
						<div class="arrow-left"></div>
						<div class="arrow-right"></div>
						<div class="arrow-top"></div>
					</div>

					<div class="top-middle">
						<div class="arrow-left"></div>
						<div class="arrow-right"></div>
					</div>

					<div class="bottom-middle">
						<div class="arrow-right"></div>
						<div class="arrow-left"></div>
						<div class="arrow-right move"></div>
					</div>

					<div class="bottom">
						<div class="arrow-left"></div>
						<div class="arrow-top"></div>
					</div>
				</div>

				<div class="design-wrap">
					<div class="top">
						<div class="arrow-left"></div>
						<div class="arrow-right"></div>
						<div class="arrow-top"></div>
					</div>

					<div class="top-middle">
						<div class="arrow-left"></div>
						<div class="arrow-right"></div>
					</div>

					<div class="bottom-middle">
						<div class="arrow-right"></div>
						<div class="arrow-left"></div>
						<div class="arrow-right move"></div>
					</div>

					<div class="bottom">
						<div class="arrow-left"></div>
						<div class="arrow-top"></div>
					</div>
				</div>
			</div>

			<div class="burrito"><img src="img/burrito.png" alt=""></div>

			<h1>Menu</h1>
			<div class="menu-line"></div>

			<div class="column-left">
				<div class="column">
					<h2 class="menu-h2" id="combo-platter">Combination Platters</h2>

					<div class="row">
						<div>
							<p>2 Beef Tacos</p>
							<p class="price">$6.99</p>
						</div>
						<div>
							<p>2 Enchiladas</p>
							<p class="price">$6.99</p>
						</div>
						<div>
							<p>Tostada & Enchilada</p>
							<p class="price">$6.99</p>
						</div>
						<div>
							<p>Taco & Enchilada</p>
							<p class="price">$6.99</p>
						</div>
						<div>
							<p>Burrito & Enchilada</p>
							<p class="price">$6.99</p>
						</div>
						<div>
							<p>2 Beef Burritos</p>
							<p class="price">$6.99</p>
						</div>
						<div>
							<p>2 Carne Asada Tacos</p>
							<p class="price">$6.99</p>
						</div>
						<div>
							<p>Carne Asada</p>
							<p class="price">$6.69</p>
						</div>
						<div>
							<p>Chorizo</p>
							<p class="price">$5.99</p>
						</div>
						<div>
							<p>Machaca</p>
							<p class="price">$6.35</p>
						</div>
						<div>
							<p>Carnitas</p>
							<p class="price">$5.89</p>
						</div>
						<div>
							<p>2 Fish Tacos</p>
							<p class="price">$5.99</p>
						</div>
						<div>
							<p>Chiles Rellenos</p>
							<p class="price">$5.95</p>
						</div>
					</div>

					<h2 class="menu-h2">Burritos</h2>

					<div class="row">
						<div>
							<p>Beef Burrito</p>
							<p class="price">$5.99</p>
						</div>

						<div>
							<p>Pork Burrito</p>
							<p class="price">$5.99</p>
						</div>

						<div>
							<p>Carne Asada Burrito</p>
							<p class="price">$4.99</p>
						</div>

						<div>
							<p>Chicken Burrito</p>
							<p class="price">$5.49</p>
						</div>

						<div>
							<p>California Burrito</p>
							<p class="price">$6.69</p>
						</div>

						<div>
							<p>Red Chili Burrito</p>
							<p class="price">$4.89</p>
						</div>

						<div>
							<p>Machaca Burrito</p>
							<p class="price">$5.99</p>
						</div>

						<div>
							<p>Mixed Burrito</p>
							<p class="price">$5.89</p>
						</div>

						<div>
							<p>Chorizo Burrito</p>
							<p class="price">$5.99</p>
						</div>

						<div>
							<p>Bacon and Egg</p>
							<p class="price">$4.99</p>
						</div>

						<div>
							<p>Sausage and Egg</p>
							<p class="price">$4.99</p>
						</div>

						<div>
							<p>Chorizo and Egg</p>
							<p class="price">$4.99</p>
						</div>

						<div>
							<p>Picodegallo and Egg</p>
							<p class="price">$4.99</p>
						</div>
					</div>
				</div>
			</div>

			<div class="column-middle">
				<div class="column">
					<h2 class="menu-h2">Enchiladas</h2>

					<div class="row">
						<div>
							<p>2 Cheese</p>
							<p class="price">$4.55</p>
						</div>

						<div>
							<p>2 Beef</p>
							<p class="price">$4.65</p>
						</div>

						<div>
							<p>2 Chicken</p>
							<p class="price">$3.55</p>
						</div>
					</div>

					<h2 class="menu-h2">Side Orders</h2>

					<div class="row">
						<div>
							<p>Carne Asada Fries</p>
							<p class="price">$4.55</p>
						</div>

						<div>
							<p>Jalepenos</p>
							<p class="price">$4.65</p>
						</div>

						<div>
							<p>Quesadilla</p>
							<p class="price">$3.55</p>
						</div>

						<div>
							<p>Ham Quesadilla</p>
							<p class="price">$4.55</p>
						</div>

						<div>
							<p>1/2 Pint of beans</p>
							<p class="price">$4.65</p>
						</div>

						<div>
							<p>1/2 Pint of rice</p>
							<p class="price">$4.55</p>
						</div>

						<div>
							<p>Super Nachos</p>
							<p class="price">$4.65</p>
						</div>

						<div>
							<p>1 Tamale</p>
							<p class="price">$4.65</p>
						</div>

						<div>
							<p>Extra Cheese Quacamole</p>
							<p class="price">$1.65</p>
						</div>

						<div>
							<p>Supreme Quesadilla</p>
							<p class="price">$3.95</p>
						</div>

						<div>
							<p>Chips and Quacamole</p>
							<p class="price">$1.65</p>
						</div>

						<div>
							<p>1 Chiles Rellano</p>
							<p class="price">$4.65</p>
						</div>

						<div>
							<p>Chips and salsa</p>
							<p class="price">$2.65</p>
						</div>

						<div>
							<p>Churros</p>
							<p class="price">$3.65</p>
						</div>
					</div>

					<h2 class="menu-h2">Breafast Plates</h2>

					<div class="row">
						<div>
							<p>Huevos Rancheros</p>
							<p class="price">$6.55</p>
						</div>

						<div>
							<p>Steaks Rancheros</p>
							<p class="price">$6.65</p>
						</div>

						<div>
							<p>Scrambled Eggs w/Ham</p>
							<p class="price">$5.55</p>
						</div>

						<div>
							<p>Scrambled Eggs w/Sausage</p>
							<p class="price">$5.55</p>
						</div>

						<div>
							<p>Chorizo Omelette</p>
							<p class="price">$6.35</p>
						</div>

						<div>
							<p>Carne Asada Omelette</p>
							<p class="price">$6.45</p>
						</div>

						<div>
							<p>Eggs and Bacon</p>
							<p class="price">$3.55</p>
						</div>
					</div>
				</div>
			</div>

			<div class="column-right">
				<div class="column">
					<h2 class="menu-h2">Drinks</h2>

					<div class="row">
						<div>
							<p>Coca-cola</p>
							<p class="price">$1.55</p>
						</div>

						<div>
							<p>Jarrito</p>
							<p class="price">$1.95</p>
						</div>

						<div>
							<p>Sangria</p>
							<p class="price">$1.95</p>
						</div>
					</div>

					<h2 class="menu-h2">Tacos</h2>

					<div class="row">
						<div>
							<p>Carne Asada Taco</p>
							<p class="price">$2.55</p>
						</div>

						<div>
							<p>Beef Taco</p>
							<p class="price">$2.85</p>
						</div>

						<div>
							<p>Pork Taco</p>
							<p class="price">$2.85</p>
						</div>

						<div>
							<p>Chicken Taco</p>
							<p class="price">$2.65</p>
						</div>

						<div>
							<p>Fish Taco</p>
							<p class="price">$2.65</p>
						</div>

						<div>
							<p>Carnita Taco</p>
							<p class="price">$2.55</p>
						</div>

						<div>
							<p>Cabeza Taco</p>
							<p class="price">$2.65</p>
						</div>

						<div>
							<p>Adobada Taco</p>
							<p class="price">$4.65</p>
						</div>

						<div>
							<p>Adobada Taco</p>
							<p class="price">$4.65</p>
						</div>

						<div>
							<p>Adobada Taco</p>
							<p class="price">$4.65</p>
						</div>
					</div>	

					<h2 class="menu-h2">Tortas</h2>

					<div class="row">
						<div>
							<p>Carne Asada</p>
							<p class="price">$4.09</p>
						</div>

						<div>
							<p>Machaca</p>
							<p class="price">$4.09</p>
						</div>

						<div>
							<p>Ham</p>
							<p class="price">$4.65</p>
						</div>

						<div>
							<p>Chorizo</p>
							<p class="price">$4.95</p>
						</div>

						<div>
							<p>chicken</p>
							<p class="price">$4.95</p>
						</div>
					</div>	

					<h2 Class="menu-h2">Tostadas</h2>

					<div class="row">
						<div>
							<p>Pork</p>
							<p class="price">$2.65</p>
						</div>

						<div>
							<p>Beef</p>
							<p class="price">$2.65</p>
						</div>

						<div>
							<p>Fish</p>
							<p class="price">$2.65</p>
						</div>

						<div>
							<p>Carne Asada</p>
							<p class="price">$2.65</p>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="hours-section">
			
		</div>
	</main>
	<footer>
		
	</footer>
</body>
<script src="https://unpkg.com/scrollreveal"></script>
<script src="script.js"></script>
</html>

1 Ответ

0 голосов
/ 19 мая 2019

Возможно, попытайтесь установить background-image для класса div.header, и оно должно появиться вверху.Это то, что вы ожидаете?background-image: url (путь к img буррито);

...