我认为问题的出现是因为我对滚动框的相对定位，但我不知道如何解决这个问题，因为滚动框需要保持在那个位置，任何人都可以帮助我吗？
非常感谢!!
这是小提琴：http://jsfiddle.net/wp76qjga/
HTML代码：
<script type="text/javascript" src="../Java/jquery.js"></script>
<meta charset="UTF-8">
<title>Feline</title>
<body background="../Images/DSC_8592(sm5).jpg">
<div id="wrapper">
<header id="top">
<h1 style="font-size:60px">L'Auberge De Napoleon III</h1>
<nav id="mainnav">
<ul>
<li><a href="Index.html" >Home</a></li>
<li><a href="Properties Features.html">Features</a></li>
<li><a href="Activities.html">Activities</a></li>
<li><a href="Contact.html" class="thispage">Contact US</a></li>
<li><a href="Pricing.html">Pricing</a></li>
</ul>
</nav>
</header>
<div id="contactimg">
<img src="http://www.personal.psu.edu/cmr5496/sky_main.jpg">
</div>
<div class="scroll" style="position:relative; left:0px; top:-500px; width:350px; height:480px; padding-left:10px; padding-right:10px; padding-top:10px;">
<div style="position:relative; left:65px"><img style="padding-left:px" width="190px" height="180px" src="../Images/Contact Photos/Map5.png"></div>
<div style="color:rgba(255,255,255,1.00); text-align:justify" class="h1">
<h5>By Car</h5>
<hr width="100%" align="left" color="#39A2E1"/>
</div>
<div style="color:rgba(255,255,255,1.00); text-align:justify; font-weight:200;" class="p">Felines Termenes is situated half an hour from the A61 (Exit 25, Lezignan), and less then an hour from the E 15 (Exit 39, Sigean).</div>
<div style="color:rgba(255,255,255,1.00); text-align:justify; font-weight:200" class="h1"><h5>By Air</h5></div>
<hr width="100%" align="left" color="#39A2E1"/>
<div style="color:rgba(255,255,255,1.00); text-align:justify; font-weight:200" class="p">Budget airlines fly to Carcassonne, Perpignan. Montpellier and Toulouse. The Eurostar goes to Montpellier. It is possible to hire a car at all airports.</div>
<div style="color:rgba(255,255,255,1.00); text-align:justify" class="h1"><h5>By Train</h5></div>
<hr width="100%" align="left" color="#39A2E1"/>
<div style="color:rgba(255,255,255,1.00); text-align:justify; font-weight:200" class="p">The TGV train from Lille and Paris serves Narbonne and Carcassonne. These TGV trains connect with the Eurostar from London. It is possible to hire a car at all railway stations</div>
</div>
<img width="970px" height="600px" style="padding-bottom:20px" src="http://upload.wikimedia.org/wikipedia/commons/2/2a/Junonia_lemonias_DSF_upper_by_Kadavoor.JPG"/>
<div class="hrfancy"><hr width="80%" style="position:relative; top:70x"></div>
<p style="margin: 0px 30px 10px 30px"> The house has been entirely renovated with respect for the original elements like stone walls, wooden beams, … This 5 bedroom house (sleeps 8) is a well equipped property. Situated in one of the most sunny regions of France it profits from a sunny, sheltered court yard and garage in the basement.
This comfortable property is based in the Languedoc-Roussillon region, famous for its recreational activities as here in Cathar country history meets nature. From the village you can reach famous historic towns such as Perpignan, Carcassonne and Narbonne within an hour. Felines is also close to the medieval village of Lagrasse, one of the “les plus beaux villages de France”. A drive to the sea or Spain equally takes you about an hour. Take advantage of your stay and visit some vintners, as Felines-Termenes is on the “Route des 20”, a local initiative of the wine growers of the Corbieres. With your family or with friends, you will appreciate the calm of this 180 sq.m. property. </p>
</article>
<footer>Powered By Ruben © 2015 </footer>
</div>
CSS代码：
.hrfancy { /* taken from http://css-tricks.com/examples/hrs/ */
height: 30px;
border-style: solid;
border-color: black;
border-width: 1px 0 0 0;
border-radius: 20px;
}
.hrfancy:before { /* taken from http://css-tricks.com/examples/hrs/ */
display: block;
content: "";
height: 30px;
margin-top: -31px;
border-style: solid;
border-color: black;
border-width: 0 0 1px 0;
border-radius: 20px;
}
#contactimg {
position:relative;
height:530px;
width:996px;
}
#contactimg img {
height: 100%;
width: 97%;
}
div.scroll {
width: 100px;
height: 100px;
overflow: scroll;
background-color:rgba(27,27,27,0.60)
}
body {
margin: 0px;
color: #151515;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
background-color: #EFF5F8;
}
#slideshow {
position:relative;
height:530px;
width:996px;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
}
#slideshow IMG.active {
z-index:10;
}
#slideshow IMG.last-active {
z-index:9;
}
#wrapper {
width: 100%;
min-width: 740px;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
border:#6627C9;
background-color:#E2CFAF;
padding-left: 17px;
padding-right: 17px;
}
#slideshow img {
height: 100%;
width: 97%;
}
#top {
overflow: hidden;
}
h1 {
margin-top: 0px;
margin-bottom: 14px;
color: #3399DD;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
max-width: 100%;
text-align: center;
font-weight: 600;
font-size: 36px;
}
h5 {
margin-top: 10px;
margin-bottom: 1px;
color: #3399DD;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
max-width: 100%;
text-align: left;
}
hr{
margin-top: 0px;
margin-bottom:0px;
}
#mainimg img {
max-width: 100%;
padding-top: 2px;
padding-bottom: 2px;
}
.centered {
margin-left: auto;
margin-right: auto;
}
footer {
padding-top: 2px;
padding-bottom: 2px;
padding-left: 2%;
background-color: #43a6cb;
color: #FFFFFF;
position: relative;
bottom: 0px;
}
a {
font-weight: bold;
text-decoration: none;
}
a:link {
color: #FF6600;
}
a:visited {
color: #FF944C;
}
#mainnav a:hover, #mainnav a:active,#mainnav a:focus , #mainnav a.thispage{
color: #FFFFFF;
text-decoration: none;
background-color: #43A6CB;
}
li:hover hr{
color: orange;
}
#mainnav ul {
list-style-type: none;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#mainnav a {
width: 20%;
background-color: #4D4D4D;
text-align: center;
text-transform: uppercase;
color: #FFFFFF;
padding-top: 6px;
padding-bottom: 6px;
display: block;
float: left;
}
#wrapper #main ul.horizontal1 li
{
display: inline-block;
list-style; none;
}
#wrapper #main .horizontal1 img {
height: 250px;
width: 200px;
margin-top: 15px;
}
#wrapper #main ul.horizontal1 li {
display: inline-block;
font-size: 16px;
list-style; none;
padding: 1em;
text-align: justify;
vertical-align: top;
width: 25%;
}
ul.horizontal1 {
list-style; none;
margin: 0;
padding: 20;
font-size: 0;
}
#wrapper #main ul.horizontall li
{
display: inline-block;
list-style; none;
}
#wrapper #main ul.horizontall li {
display: inline-block;
font-size: 16px;
list-style; none;
padding: 1em;
text-align: justify;
vertical-align: top;
width: 50%;
}
ul.horizontall {
list-style; none;
margin: 0;
padding: 0;
font-size: 0;
}
img{
display: block;
}
*
{
box-sizing: border-box;
}
#main {
padding-left: 10px;
paddin-right: 10px;
}
JAVA :(以防万一）
$(document).ready(function() {
$(".popup").hide();
$(".h1").click(function() {
$(".h1").next().slideToggle(700);
});
});
我知道它与下面的定位有关，当我在.scroll类中做相对位置以将它放在主图像上时，它仍然存在的空间。
<div class="scroll" style="position:relative; left:0px; top:-500px; width:350px; height:480px; padding-left:10px; padding-right:10px; padding-top:10px;">