轮播图像显示在我的页脚上方

Question

我使用jquery carousel插件来显示一些图像。它工作正常，但我有一个奇怪的效果，我没有看到任何方法来解决这个问题。

我的图片，当屏幕高度较小时，图片会显示在我的页脚上方，您可以在我的图片中看到...

你有没有办法解决这个问题？

我的jquery：

<script type="text/javascript" src="js_caroussel/jquery.featureCarousel.min.js" charset="utf-8"></script>
<script type="text/javascript">
    $(document).ready(function() {
    var carousel = $("#carousel").featureCarousel({
    });

    $("#but_prev").click(function () {
      carousel.prev();
    });
    $("#but_pause").click(function () {
      carousel.pause();
    });
    $("#but_start").click(function () {
      carousel.start();
    });
    $("#but_next").click(function () {
      carousel.next();
    });
    });
</script>

我的HTML

<div class="carousell">
<div class="carousel-container">
    <div id="carousel">
        <div class="carousel-feature">
            <a href="#"><img class="carousel-image" width="620" height="420" alt="Image Caption" src="http://placehold.it/620x420"></a>
            <div class="carousel-caption">
                <p>
                    Lorem Ipsum
                    <a class="link2" href="#">Read + <i class="fa fa-arrow-right"></i></a>
                </p>
            </div>
        </div>
        <div class="carousel-feature">
            <a href="#"><img class="carousel-image" width="620" height="420" alt="Image Caption" src="http://placehold.it/620x420g"></a>
            <div class="carousel-caption">
                <p>
                    Lorem Ipsum
                    <a class="link2" href="#">Read + <i class="fa fa-arrow-right"></i></a>
                </p>
            </div>
        </div>
        <div class="carousel-feature">
            <a href="#"><img class="carousel-image" width="620" height="420" alt="Image Caption" src="http://placehold.it/620x420"></a>
            <div class="carousel-caption">
                <p>
                    Lorem Ipsum
                    <a class="link2" href="#">Read + <i class="fa fa-arrow-right"></i></a>
                </p>
            </div>
        </div>
</div>
<div id="carousel-left"><img src="img/arrow-left.png" width="30" height="30" /></div>
<div id="carousel-right"><img src="img/arrow-right.png" width="30" height="30" /></div>
</div>

我的css：

.carousell{
    position:relative;
    height: 20px;
}
.carousel-container {

  margin:0 auto;
}
#carousel {
  background-color:#none;
  position:relative;
  font-size:12px;
  font-family: Arial; 
  top:250px;
}
.carousel-image {
  border:0;
  display:block;
}
.carousel-feature {
  position:absolute;
  top:-100px;
  left:-1000px;
  border:5px solid #B21203;
  cursor:pointer;

}
.carousel-feature .carousel-caption {
  position:absolute;
  bottom:0;
  width:100%;
  background-color:#B21203;
}
.carousel-feature .carousel-caption p {
  margin:0;
  padding:5px;
  font-weight:bold;
  font-size:20px;
  color:#fff;
  text-align:center;
}
.tracker-summation-container {
  position:absolute;
  color:#fff;
  right:48px;
  top:380px;
  padding:3px;
  margin:3px;
  background-color:#B21203;
}
.tracker-individual-container {
  position:absolute;
  color:white;
  right:48px;
  top:410px;
  padding:0;
  margin:0;
}
.tracker-individual-container li {
  list-style:none;
}
.tracker-individual-container .tracker-individual-blip {
  margin:0 3px;
  padding:0 3px;
  color:white;
  text-align:center;
  background-color:#DDD;
}
.tracker-individual-container .tracker-individual-blip-selected {
  color:white;
  font-weight:bold;
  background-color:#B21203;
}
#carousel-left {
  position:absolute;
  bottom:-460px;
  left:5px;
  cursor:pointer;
}
#carousel-right {
  position:absolute;
  bottom:-460px;
  right:5px;
  cursor:pointer;
}