我正在学习教程。我发现在使用CSS制作产品展示时，它看起来很棒，但是我想在页面上添加更多内容。
在下面，我想放置一个带有更多图像的滑块，添加文本并包括页脚。
但是，当我添加滑块时，它就直接位于产品展示柜的顶部，并且页面不会滚动。我已经搜索并尝试了很多选择，但对我没有任何帮助-有任何建议吗？
html, body {
width: 100%;
}
/*----------------------------
Styling the presentation
-----------------------------*/
#impress {
width: 100%;
}
#impress:not(.impress-not-supported) .step{
opacity:0.4;
}
#impress .step{
width:700px;
height: 600px;
position:relative;
margin:0 auto;
-moz-transition:1s opacity;
-webkit-transition:1s opacity;
transition:1s opacity;
}
#impress .step.active{
opacity:1;
}
#impress h2{
font-family: 'Abril Fatface', cursive;
font-size: 42px;
color:#444648;
position:absolute;
/* z-index:10; */
}
#impress p{
font-family: 'Montserrat', sans-serif;
font-size: 18px;
color:#27333f;
position:absolute;
/* z-index:10; */
}
#impress img{
position:absolute;
/* z-index:1; */
}
.arrow{
width:32px;
height:54px;
background:url('./img/arrows.png') no-repeat;
position:fixed;
top:50%;
margin-top:-27px;
cursor:pointer;
text-indent:-9999px;
overflow:hidden;
opacity:0.8;
border:none !important;
text-decoration:none !important;
-moz-transition:0.2s opacity;
-webkit-transition:0.2s opacity;
transition:0.2s opacity;
}
.arrow:hover{
opacity:1;
}
#arrowLeft{
left:45px;
}
#arrowRight{
right:45px;
background-position:top right;
}
/*----------------------------
Slide 1 - Intro
-----------------------------*/
/*
#impress #intro{
width: 500px;
}
*/
#intro h2{
left: 300px;
top: 120px;
width: 80%;
}
#intro p {
font-size: 18px;
line-height: 1.4;
top: 230px;
left: 340px;
white-space: nowrap;
}
#phone-one{
right: 300px;
}
/*----------------------------
Slide 2
-----------------------------*/
#simplicity h2 {
margin-top: 130px;
left: -40px;
}
#simplicity p {
width: 50%;
margin-top: 220px;
line-height: 1.4;
}
#phone-two {
left: 300px;
}
/*----------------------------
Slide 3
-----------------------------*/
#connect h2 {
margin: 350px 30px 0 -30px;
}
#connect p {
margin-top: 440px;
line-height: 1.4;
text-align: left;
}
#phone-three {
bottom: 90px;
}
/*----------------------------
Slide 4
-----------------------------*/
#upload h2 {
margin-top: 120px;
left: -100px;
}
#upload p {
width: 60%;
margin-top: 210px;
line-height: 1.4;
left: -60px;
}
#phone-four {
left: 250px;
bottom: 0px;
}
/*----------------------------
Slide 5
-----------------------------*/
#music h2 {
margin: 0px 50px;
width: 80%;
}
#music p {
text-align: left;
width: 80%;
margin: 80px;
line-height: 1.4;
top: 10px;
}
#phone-five {
top: 100px;
left: 50px;
} <html>
<head>
<meta charset="utf-8" />
<title>Impressive CSS3 Product Showcase | Tutorialzine Demo</title>
<!-- Google Webfonts and our stylesheet -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow|Open+Sans:300">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Montserrat:400,700" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<section class="header-section">
<div id="impress" class="impress-not-supported">
<!-- The Slides Will Go Here -->
<!-- The first slide retains its default position. We could omit the data attributes -->
<div id="intro" class="step" data-x="0" data-y="0">
<h2>Quality Watch Photography</h2>
<p>We take the very best quality, realistic photography <br> of your new and pre-owned watches. We understand <br>the challenges in photographing different styles of <br>watch, carefully considering each component to ensure <br>the perfect representation of your watch.</p>
<img src="img/watch-one.png" width="700" height="700" alt="Galaxy Nexus" id="phone-one">
</div>
<!-- We are offsetting the second slide, rotating it and making it 1.8 times larger -->
<div id="simplicity" class="step" data-x="1100" data-y="1200" data-scale="1.8" data-rotate="190">
<h2>The Devil Is In The Detail</h2>
<p>We photograph using the ’focus stack' method to create the very best fully focused photography.
We position your watch and take many images closing in on each tiny detail, sometimes up to 35
images and then carefully select, process and blend to create one super crisp, detailed photograph.
We undertake all our processing and retouching in house to ensure quality in every photograph we take.</p>
<img src="img/watch-two.png" width="700" height="700" alt="Galaxy Nexus" id="phone-two">
</div>
<!-- Same for the rest.. -->
<div id="connect" class="step" data-x="-300" data-y="600" data-scale="0.2" data-rotate="270">
<h2>Studio Or We Come To You</h2>
<p>We understand your watches are precious and extremely valuable, we are fully set up to photograph here in our studio, but we have created our own bespoke portable studio so we can come to you and photograph your watches in the security of your own home, shop or office.</p>
<img src="img/watch-three.png" width="700" height="700" alt="Galaxy Nexus" id="phone-three">
</div>
<div id="upload" class="step" data-x="-200" data-y="1500" data-rotate="180">
<h2>Character & Condition</h2>
<p>We have the expertise and experience when photographing your vintage and pre owned watches. We work with retailers, dealers and auction houses photographing watches to capture the character and condition of each unique watch showing your customer a highly detailed and accurate photograph of the watch for sale.</p>
<img src="img/watch-four.png" width="700" height="700" alt="Galaxy Nexus" id="phone-four">
</div>
<div id="music" class="step" data-x="-1200" data-y="1000" data-scale="0.8" data-rotate="270">
<h2>Part Of Your Team</h2>
<p>We love working with client’s from all aspects of the watch industry, from small independent jewellers to established Swiss brands, unique micro brands to bespoke watch customisation and watch dealers and auction houses. We are fully client-focused and always here to provide you with the very best photographs of your watches.
</p>
<img src="img/watch-five.png" width="700" height="700" alt="Galaxy Nexus" id="phone-five">
</div>
</div>
<a id="arrowLeft" class="arrow"><</a>
<a id="arrowRight" class="arrow">></a>
</section>
<section class="gallery-one">
<div class="white-watches">
<h4>watch gallery</h4>
</div>
</section>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="./img/watch-slider-one.jpg" alt="Los Angeles">
</div>
<div class="item">
<img src="./img/watch-slider-two.jpg" alt="Chicago">
</div>
<div class="item">
<img src="./img/jewel-slider-one.jpg" alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
答案 0 :(得分：0)
添加， 清楚：两者； css文件中的滑块div应该可以解决问题