css - 内部 div 不会捕捉到容器 div 的顶部

Question

在您进一步阅读之前，我正在使用 OneByOne Jquery Slider 插件，插件内容是我试图捕捉到其容器 div 顶部的内容。要了解有关 OneByOne 的更多信息，请访问以下链接:http://codecanyon.net/item/jquery-onebyone-slider-plugin/684613

我正在尝试将内部 div 捕捉到其容器 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 block ，这是我的相关 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 value 将它“拉”到它在视觉上出现的位置。因为它仍在占用 DOM 中的空间，所以它会推送您的 #content向下 61px。

我看不出有什么理由保留你的做法，所以如果你可以在不破坏任何其他东西的情况下改变它，我建议把它改成

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