Div未在父容器中正確定位

Question

我在名爲#content_container的容器中有兩個div。

我的div是#lightbox_block，其中包含一個帶有4個較小矩形的大黑色矩形和#advertisement_bar，它現在只是平坦的。

我希望#advertisement_bar出現在#lightbox_block下面，但它似乎堅持到#content_container的頂部。我試圖添加一個相對定位標籤來強制它，但它仍然堅持，任何提示都非常感謝！

#content_container { 
 
    width: 930.75px; 
 
    height: 620px; 
 
    margin-left: 10px; 
 
    margin-right: 0px; 
 
    margin-top: 0px; 
 
    background-color: white; 
 
} 
 
#lightbox_block { 
 
    width: 930.75px; 
 
    height: 324.00px; 
 
    margin-left: 0px; 
 
    margin-right: 0px; 
 
    margin-top: 6px; 
 
    position: absolute; 
 
} 
 
#advertisement_bar { 
 
    margin-left: 0px; 
 
    margin-right: 0px; 
 
    margin-top: 0px; 
 
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0a0a0a+0,222222+80,232323+100 */ 
 
    background: rgb(10, 10, 10); 
 
    /* Old browsers */ 
 
    background: -moz-linear-gradient(top, rgba(10, 10, 10, 1) 0%, rgba(34, 34, 34, 1) 80%, rgba(35, 35, 35, 1) 100%); 
 
    /* FF3.6-15 */ 
 
    background: -webkit-linear-gradient(top, rgba(10, 10, 10, 1) 0%, rgba(34, 34, 34, 1) 80%, rgba(35, 35, 35, 1) 100%); 
 
    /* Chrome10-25,Safari5.1-6 */ 
 
    background: linear-gradient(to bottom, rgba(10, 10, 10, 1) 0%, rgba(34, 34, 34, 1) 80%, rgba(35, 35, 35, 1) 100%); 
 
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#0a0a0a', endColorstr='#232323', GradientType=0); 
 
    /* IE6-9 */ 
 
    position: absolute; 
 
}

<div id="content_container"> 
 

 
    <div id="lightbox_block"> 
 
    </div> 
 

 
    <div id="advertisement_bar"> 
 
    </div> 
 

 
</div>

的問題截圖

Answer 1

問題出在內容容器和其中一個空白左邊的值上，我將這些塊設置爲絕對，相對，相對並刪除了餘量，現在就可以使用！

Answer 2

你的筆無法正常工作，但它看起來像你需要你有position absolute從#advertisement_bar

Answer 3

刪除位置absolute; 在你的#advertisement_bar除非您定義top或bottom屬性，否則CSS，position absolute將使其保持默認狀態。

您可以給它更多top比#light_box或給它一個不同的位置值。

您可以在Mozilla Developers documentation中閱讀更多關於此的內容。

Answer 4

您應該刪除position: absolute，因爲position: absolute將元素從正常頁面流中取出。在這種情況下，如果你希望兩個孩子的div到你的父容器，這是一種方法：

.parent { 
width: 992px; 
height: 400px; 
} 
.first-child { 
width: 100%; 
height: 200px; 
display: block; 
} 
.second-child { 
width: 100%; 
height: 200px; 
display: block; 
} 

<div class="parent"> 
<div class="first-child">Hello world</div> 
<div class="second-child">Hello again</div> 
</div> 

如果你堅持使用position: absolute，那麼你必須添加top: ~300px ...，你的第二個div「逼迫「它低於你的第一個div。我不推薦它。而且您還必須將position: relative添加到您的父分區，因此您的孩子與父母相關，而不是窗口。