Div nicht korrekt im übergeordneten Container positioniert

Question

Ich habe zwei divs in einem Container mit dem Namen #content_container.

Meine divs sind #lightbox_block, die ein großes schwarzes Rechteck mit 4 kleineren Rechtecken und #advertisement_bar enthält, die für den Moment gerade flach ist.

Ich möchte, dass #advertisement_bar unter #lightbox_block erscheint, aber es scheint an der Spitze von #content_container zu bleiben. Ich habe versucht, eine relative Positionierungsmarke hinzuzufügen, um sie weg zu zwingen, aber sie haftet noch, irgendwelche Spitzen werden sehr geschätzt!

#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>

Screenshot von Problem

Answer 1

Das Problem war mit dem Inhaltscontainer und einem der margin-left-Werte, ich setze die Blöcke auf absolut, relativ, relativ und entfernt den Rand-links und es funktioniert jetzt!

Answer 2

Ihr Stift funktioniert nicht, aber es sieht aus wie Sie Position entfernen, müssen absolute; von #advertisement_bar

Answer 3

Sie position absolute haben in Ihrer #advertisement_bar CSS, position absolute wird es standardmäßig an der Spitze bleiben, es sei denn, Sie definieren eine top oder bottom Eigenschaft.

Sie könnten mehr geben top als #light_box oder geben Sie einen anderen Positionswert.

Sie können mehr darüber in der Mozilla Developers documentation lesen.

Answer 4

Sie sollten position: absolute entfernen, weil position: absolute das Element aus dem normalen Seitenfluss entfernt. In diesem Fall, wenn Sie zwei Kind divs wollen in Ihren übergeordneten Container, dann ist dies ein Ansatz:

.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> 

Wenn Sie position: absolute beharren verwenden, dann haben Sie top: ~300px ..., um Ihre zweite div hinzufügen, indem Sie „zwingen "Es unter deinem ersten Div. Ich empfehle es nicht. Außerdem müssen Sie Ihrem übergeordneten div position: relative hinzufügen, damit Ihre untergeordneten Elemente relativ zum übergeordneten Element und nicht zum Fenster sind.