我正在尝试从此网站复制页脚。 https://pulice.com/。
如您所见，页脚隐藏在其他部分下，直到您滚动到底部时才显示出来。
我使用了我的开发工具，发现页脚上的位置是固定的。我做了同样的事情，这产生了两个问题。
第一页脚在您向上滚动时会覆盖我的统计信息部分，而z-index会 这里没有什么。
2，当用户向页面底部倾斜时，不显示页脚区域，而是将其隐藏在页面上方。
在这两个问题上我可以得到一些帮助吗？
body,
html {
margin: 0;
padding: 0;
}
/*---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 .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>
<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>
<main>
<div 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>
</div>
<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>
<section class="footer">
<div class="wrapper">
</div>
</section>
</main>
</body>
</html>
答案 0 :(得分：1)
一种方法是...
您可以在页面正文周围使用包装纸（我的示例称为inner-wrap）。在页面底部，还有另一个div （同级为inner-wrap），它将页面底部向上推得足以使固定页脚可见-如果第二个div有一个透明背景...因此，给第二个div透明背景。
因此，重点是上推div和页脚必须处于相同的高度。
注意：我将页脚div（和页脚窗口div）的高度设置为仅150像素，这样就可以在摘要窗口中看到它们而无需全屏显示。
body, html{margin:0;padding:0;}
/*---HEADER---*/
#inner-wrap{background:pink;}
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:relative;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:150px;background:transparent;}
.footer{width:100%;background-color:purple;height:150px;position:fixed;bottom:0;left:0;z-index:-1;padding:20px;}<!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 id="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>
<main>
<div 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>
</div>
<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">
This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer. This is the footer.
</div>
</section>
</main>
</body>
</html>
答案 1 :(得分：1)
如果您正确理解Z-index属性，这很简单，也就是说，理解它并不是太难。 CSS-Tricks上有一篇关于主题here的不错的文章。
如果您在下面查看我的示例，可以看到之后的简化版本，我已经注释了代码，以便您了解这些步骤。
/* Make sure the body is set to relative to root the document flow again. */
body {
position: relative;
}
/* -- Wrap the page content and lift it from the document flow. */
.page-wrap {
position: absolute;
display: block;
width: 100%;
/* change the layer position up the dom stack*/
z-index: 999;
}
/* re-wrap the content and place a white background on it */
.page-wrap .content-wrap {
background-color: #fff;
padding: 1rem;
}
/* here is our window for the footer */
.spacer {
height: 200px;
background: transparent;
}
/* finally fix the footer to the bottom of the browser window */
.tucked-footer {
position: fixed;
display: block;
width: 100%;
bottom: 0;
z-index: -999;
height: 200px;
padding: 3rem;
background-color: #222;
color: #fff;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="page-wrap">
<div class="content-wrap">
<div class="container">
<div class="jumbotron">
<h1 class="display-4">Tucked footer</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>
<div class="row">
<div class="col-lg-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non sapien mattis, tempor erat ac, dignissim ipsum. Vestibulum dapibus turpis vel tincidunt condimentum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non sapien mattis, tempor erat ac, dignissim ipsum. Vestibulum dapibus turpis vel tincidunt condimentum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non sapien mattis, tempor erat ac, dignissim ipsum. Vestibulum dapibus turpis vel tincidunt condimentum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non sapien mattis, tempor erat ac, dignissim ipsum. Vestibulum dapibus turpis vel tincidunt condimentum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non sapien mattis, tempor erat ac, dignissim ipsum. Vestibulum dapibus turpis vel tincidunt condimentum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non sapien mattis, tempor erat ac, dignissim ipsum. Vestibulum dapibus turpis vel tincidunt condimentum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non sapien mattis, tempor erat ac, dignissim ipsum. Vestibulum dapibus turpis vel tincidunt condimentum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non sapien mattis, tempor erat ac, dignissim ipsum. Vestibulum dapibus turpis vel tincidunt condimentum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non sapien mattis, tempor erat ac, dignissim ipsum. Vestibulum dapibus turpis vel tincidunt condimentum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non sapien mattis, tempor erat ac, dignissim ipsum. Vestibulum dapibus turpis vel tincidunt condimentum.</p>
</div>
</div>
</div>
</div>
<!-- We add this spacer to act like a window -->
<div class="spacer">
</div>
</div>
<footer class="tucked-footer">
<div class="container">
<div class="row">
<div class="col-lg-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non sapien mattis, tempor erat ac, dignissim ipsum. Vestibulum dapibus turpis vel tincidunt condimentum.</p>
</div>
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
希望这会有所帮助！