divは親コンテナに正しく配置されていません

Question

#content_containerという名前のコンテナに2つのdivがあります。

私のdivは#lightbox_blockです。#lightbox_blockには、四角形の小さな四角い大きな四角形と#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

あなたのペンが動作していないが、それはあなたが#advertisement_bar

Answer 3

から位置absolute; を削除する必要があるようにあなたがposition absoluteを持って見えますあなたのあなたがtopまたはbottomプロパティを定義していない限り、CSS、position absoluteはデフォルトで先頭に固執します。

#light_boxよりもtopを与えるか、別の位置の値を与えることができます。

詳細については、Mozilla Developers documentationをご覧ください。

Answer 4

position: absoluteは通常のページフローから要素を取り除くので、position: absoluteを削除する必要があります。あなたは2つの子があなたの親コンテナの中に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を使用して主張している場合は、あなたが「強制的に2番目のdivに、... top: ~300pxを追加する必要があります"それはあなたの最初のdivの下に。私はそれをお勧めしません。また、親divにposition: relativeを追加する必要があります。そのため、子は親であり、ウィンドウではありません。