Пробел выше карусели

Question

Ненавижу препятствовать переполнению стека, но я не могу обновить свой первоначальный вопрос здесь - Issue with div floating on top of carousel. JSFiddle был неправильным.

У меня возникли некоторые проблемы с этим: http://jsfiddle.net/myoozik/U6bV8/

Если вы посмотрите на над каруселью, есть гигантский разрыв. Это происходит в результате добавления черного оверлея div поверх карусели.

Любая идея о том, как избавиться от этого пробела, как он генерируется?

HTML

<div class="carousel-wrapper"> 
<div id="overlay-div"> 
    </div> 
    <div class="jcarousel-wrapper"> 
     <div class="jcarousel"> 
      <ul> 
       <li> 
        <img src="/_shared/img/img1.jpg" width="850" height="500" alt=""> 
       </li> 
       <li> 
        <img src="/_shared/img/img2.jpg" width="850" height="500" alt=""> 
       </li> 
       <li> 
        <img src="/_shared/img/img3.jpg" width="850" height="500" alt=""> 
       </li> 
      </ul> 
     </div> <a href="#" class="jcarousel-control-prev">&lsaquo;</a><a href="#" class="jcarousel-control-next">&rsaquo;</a> 
     <p class="jcarousel-pagination"></p> 
    </div> 
</div> 

CSS

#overlay-div { 
    background-color: #000; 
    width: 200px; 
    height: 200px; 
    position: relative; 
    left: 100px; 
    top: 300px; 
    z-index: 999; 
} 

.carousel-wrapper { 
    max-width: 850px; 
    /*padding: 0 20px 40px 20px;*/ 
    margin: auto; 
    overflow: hidden; 
} 
.jcarousel-wrapper { 
    margin: 20px auto; 
    position: relative; 
    /*border: 10px solid #fff; 
    -webkit-border-radius: 5px; 
     -moz-border-radius: 5px; 
      border-radius: 5px; 
    -webkit-box-shadow: 0 0 2px #999; 
     -moz-box-shadow: 0 0 2px #999; 
      box-shadow: 0 0 2px #999;*/ 
} 
.jcarousel-wrapper .photo-credits { 
    position: absolute; 
    right: 15px; 
    bottom: 0; 
    font-size: 13px; 
    color: #fff; 
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.85); 
    opacity: .66; 
} 
.jcarousel-wrapper .photo-credits a { 
    color: #fff; 
} 
/** Carousel **/ 
.jcarousel { 
    position: relative; 
    overflow: hidden; 
    width: 850px; 
    height: 500px; 
} 
.jcarousel ul { 
    width: 20000em; 
    position: relative; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
.jcarousel li { 
    float: left; 
} 
/** Carousel Controls **/ 
.jcarousel-control-prev, .jcarousel-control-next { 
position: absolute; 
top: 200px; 
width: 30px; 
height: 30px; 
text-align: center; 
background: #4E443C; 
color: #fff; 
text-decoration: none; 
text-shadow: 0 0 1px #000; 
font: 24px/27px Arial, sans-serif; 
-webkit-border-radius: 30px; 
-moz-border-radius: 30px; 
border-radius: 30px; 
-webkit-box-shadow: 0 0 2px #999; 
-moz-box-shadow: 0 0 2px #999; 
box-shadow: 0 0 2px #999; 
} 
.jcarousel-control-prev { 
    left: -50px; 
} 
.jcarousel-control-next { 
    right: -50px; 
} 
.jcarousel-control-prev:hover span, .jcarousel-control-next:hover span { 
    display: block; 
} 
.jcarousel-control-prev.inactive, .jcarousel-control-next.inactive { 
    opacity: .5; 
    cursor: default; 
} 
/** Carousel Pagination **/ 
.jcarousel-pagination { 
    position: absolute; 
    bottom: 0; 
    left: 15px; 
} 
.jcarousel-pagination a { 
    text-decoration: none; 
    display: inline-block; 
    font-size: 11px; 
    line-height: 14px; 
    min-width: 14px; 
    background: #fff; 
    color: #4E443C; 
    border-radius: 14px; 
    padding: 3px; 
    text-align: center; 
    margin-right: 2px; 
    opacity: .75; 
} 
.jcarousel-pagination a.active { 
    background: #4E443C; 
    color: #fff; 
    opacity: 1; 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75); 
} 

Answer 1

черного цвета коробка появляется из-за #overlay-div Div, который присутствует, который имеет некоторую высоту, ширину и цвет фона. если вы установили display:none, пространство и черный ящик исчезнут.

ниже является CSS

#overlay-div { 
    background-color: #000000; 
    display: none; 
    height: 200px; 
    left: 100px; 
    position: relative; 
    top: 300px; 
    width: 200px; 
    z-index: 999; 
} 

Fiddle here здесь.

Это вы посмотрите на "Вы"