Inside div不会捕捉到容器div的顶部

Question

在您进一步阅读之前，我正在使用OneByOne Jquery Slider插件，插件内容是我试图捕捉到它的容器div的顶部。要了解更多关于OneByOne，这里是一个链接：http://codecanyon.net/item/jquery-onebyone-slider-plugin/684613

我试图捕捉内部格到其div容器的顶部，这里是我的（我认为是这样），相关的CSS：

#banner{ 
    position: absolute; 
}  

.oneByOne1{ 
    margin-right: auto; 
    margin-left: auto; 
    width: 960px; 
    height: 420px;  
    position: relative; 
    overflow: hidden; 
} 

#banner .oneByOne_item{ 
    position: absolute; 
    width: 960px; 
    height: 420px; 
    overflow: hidden; 
    display: none; 
} 

我试图捕捉到顶部的DIV是“旗帜” DIV，容器DIV是“内容”，但与oneByOne插件，它是公认的oneByOne DIV块以上的编码，这里是我的相关HTML：

<div id="content"> 
    <div id="banner"> 
     <div class="oneByOne_item"> 
      <img src="img/storefront.jpg" class="item_1_1" />    
     </div> 
     <div class="oneByOne_item">          
      <img src="img/livemusic.jpg" class="item_1_2" /> 
     </div> 
     <div class="oneByOne_item">          
      <img src="img/brokerecord.jpg" class="item_1_3" /> 
     </div> 
    </div> 
</div> 

这是我现在的网站的链接： http://raider.grcc.edu/~ryanduffing/recordstore/

Answer 1

<div class="search_line">具有position:relative和top: -100px。里面的图像高度为61px，因此它周围的div也是如此。

由于您将它定位得相对比较起来，它仍然占用了DOM自然会出现的空间，但是您的top值将其“拉”到视觉上的显示位置。因为它仍然占用DOM中的空间，所以它会将你的#content降低到61px。

我看不到一个很好的理由要离开它你是怎么做到的，所以如果你可以改变它没有别的什么突破，我建议将其更改为

.main_header .search_line { 
    position: absolute; 
    top: 39px; 
    right: 0; 
}