Question

大家好，我有一个z-index为-1且位于我的统计信息部分的分层页脚。这是显示公司统计信息的部分。我的z-index为1，滚动时页脚仍在其上方？我已经阅读了CSS技巧上的z-index，但无法弄清楚。任何帮助将非常感激。在此先感谢：）

body, html {
	margin: 0;
	padding: 0;
}

.inner-wrap {
	position: relative;
	z-index: 1;
}

/*---HEADER---*/

header {
	background-image: url(img/wall2.jpeg);
	height: 100vh;
	background-attachment: fixed;
}

nav {
	background-color: white;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	box-shadow: 0px 0px 100px grey;
}

.logo, ul {
	flex-basis: 30%;
	list-style-type: none;
}

ul {
	margin-right: 30px;
	margin-top: 25px;
}

li {
	display: inline-block;
	font-size: 1.55rem;
	margin-right: 20px;
	font-family: 'Rajdhani';
	color: rgba(102,102,102,0.75);
}

li:hover {
	cursor: pointer;
	color: #1a1a1a;
	transition: all 0.7s ease;
}

.after:after {
	position: relative;
	left: 12px;
	top: 2px;
	display: inline-block;
	content: "";
	width: 1px;
	height: 20px;
	background-color: rgba(102,102,102,0.25);
}

.logo {
	color: red;
	font-size: 3.7rem;
	margin: 10px;
	opacity: 1;
	margin-left: 30px;
}

.phrase {
	text-align: center;
	position: relative;
	top: 300px;
}

.phrase p {
	color: white;
	font-size: 3.5rem;
	font-family: 'Arvo';
	margin-bottom: 30px;

}

.phrase a {
	background-color: red;
	border-radius: 25px;
	color: white;
	font-family: 'Bitter';
	font-size: 1.8rem;
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 10px;
	padding-top: 10px;
}

.phrase a:hover {
	background-color: #cc2900;
	transition: all 0.2s ease;
	cursor: pointer;
}

.phrase .fas {
	display: block;
	color: white;
	font-size: 3.5rem;
	margin-top: 15px;
}

/*---ABOUT---*/

.stats {
	width: 100%;
	display: flex;
	box-shadow: 0px 0px 150px grey;
	position: relative;
	z-index: 1;
}

.stats div {
	display: inline-block;
	flex-basis: 35%;
	text-align: center;
	padding-bottom: 30px;
}

.stats p {
	font-size: 2rem;
	color: rgba(102,102,102, 1);
	font-family: 'Rajdhani';
	margin-bottom: 0;
	margin-top: 10px;
}

.stats div:before {
	display: inline-block;
	content: '';
	width: 2px;
	height: 35px;
	background-color: rgba(102,102,102, 0.60);
}

.about .wrapper {
	width: 100%;
	background-image: url('img/concrete.jpg');
	background-position: center;
	background-attachment: fixed;
	background-size: cover;
}

.about h1 {
	position: relative;
	top: 40px;
	color: white;
	font-family: 'Rajdhani';
	font-size: 4rem;
	text-align: center;
	margin-top: 0;
	word-spacing: 7px;
	text-shadow: 0px 0px 100px grey;
}

.underline {
	width: 100px;
	height: 2.5px;
	background-color: red;
	margin-right: auto;
	margin-left: auto;
	margin-top: -15px;
	border-radius: 4px;
}

.about p {
	color: white;
	font-size: 1.8rem;
	font-family: 'Arvo';
	margin-bottom: 0;
	padding-bottom: 60px;
	text-align: center;
	margin-top: 40px;
	padding-left: 50px;
	padding-right: 50px;
}

/*---FOOTER---*/

.footer-window {
	width: 100%;
	height: 500px;
	background-color: transparent;
}

.footer {
	z-index: -1;
}

.footer .wrapper {
	width: 100%;
	background-color: red;
	height: 500px;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: -1;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Kane Concrete And Construction LLC</title>
	<link rel="stylesheet" href="style.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
	<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Abel|Asap|Krub|Oxygen|Rajdhani|Staatliches|Varela+Round" rel="stylesheet">
</head>
<body>
	<div class="inner-wrap">
		<header>
			<nav>
				<div class="logo">
					<i class="fab fa-accusoft"></i>
				</div>

				<div class="nav">
					<ul>
						<li class="after">Home</li>
						<li class="after">About</li>
						<li class="after">Services</li>
						<li class="after">Job Openings</li>
						<li class="after">Gallery</li>
						<li>Contact</li>
					</ul>
				</div>
			</nav>
			
			<div class="phrase">
				<p>It all starts at the foundation.</p>
				<a>Get a Quote</a>
				<i class="fas fa-angle-down"></i>
			</div>	
		</header>

		<section class="stats">
			<div id="start-year">
				<p>Established</p><br>
				<p style="color: red; font-size: 2.3rem; font-family: 'Roboto'; font-weight: bold;">2015</p>
			</div>

			<div id="projects">
				<p>Projects</p><br>
				<p style="color: red; font-size: 2.3rem; font-family: 'Roboto'; font-weight: bold;">200+</p>
			</div>

			<div id="claims">
				<p>Insurance claims</p><br>
				<p style="color: red; font-size: 2.3rem; font-family: 'Roboto'; font-weight: bold;">87%</p>
			</div>
		</section>

		<section class="about">
			<div class="wrapper">
				<h1>About Us</h1>
				<div class="underline"></div>

				<p><span style="color: red;">W</span>e believe that Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum doloremque impedit laudantium magnam eos quae ipsum, rem, dolorum saepe laboriosam ipsam nobis architecto debitis, vel aut provident tenetur perferendis, aliquid commodi magni sequi hic quia nemo! Nam odio fugiat, similique eum saepe. Laboriosam officiis delectus reiciendis, est tenetur voluptates ducimus! Ducimus enim dolor, eos id porro, amet culpa alias sunt reprehenderit necessitatibus deserunt eum. Sunt quia accusamus facilis quo, cum maiores nam illum sit quisquam, tempora fugit? Quod voluptate debitis voluptatum illo. Est, rerum sequi. Corporis atque incidunt placeat aliquam error veniam quis, minus voluptatem, qui, a pariatur voluptatibus, ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe labore aliquid magnam velit, nisi consequuntur!</p>
			</div>
		</section>
	</div>

	<section class="footer-window"></section>

	<section class="footer">
		<div class="wrapper">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia deleniti praesentium ipsam aliquam fugiat, nihil explicabo voluptas quod incidunt non consectetur, aperiam ad quae, quos, odit consequuntur saepe a fuga recusandae voluptatibus reiciendis ipsa. Dolore ad distinctio aut, tempore ducimus odit reprehenderit perferendis vero assumenda a voluptates commodi corrupti alias illo voluptas laudantium veniam repudiandae temporibus adipisci quaerat eum, qui consequuntur nihil? Est assumenda, aut excepturi voluptas in ipsa necessitatibus adipisci dignissimos. Omnis, similique nam hic iure atque possimus voluptatibus reiciendis dignissimos eaque repudiandae pariatur eveniet sint. Nulla, aspernatur. Nobis est pariatur voluptates, unde laboriosam officia, dolore quis magnam ipsa.
		</div>
	</section>
</body>
</html>

Answer 1

如果我正确理解了您的问题，则需要：

.footer.wrapper {
  some code
}

.footer和.wrapper之间有多余的空格。如果我是对的，则空格表示同时定位这两个元素，无空格表示其子级。

我希望是那样。

z索引为-1的页脚位于z索引为1的部分上方吗？

1 个答案: