Позиция div ниже div с абсолютной позицией

Question

У меня есть один контейнер на моем сайте шириной 1024px. Я помещаю свои divs один под другим внутри. Но я хотел, чтобы один из них заполнил ширину экрана, поэтому мне пришлось использовать position: absolute. Проблема в том, что когда я устанавливаю следующий div ниже него, он идет вместо абсолютно позиционированного div. Что-то вроде:

<div style="width: 1024px; margin: 0 auto;"> 
    <div style="position: absolute; height: 500px;"> 
    </div> 
    <div style="height: 100px;"> 
     It's at the top of the upper div. 
    </div> 
</div> 

Как я могу решить эту проблему?

Answer 1

Try позиция: относительная, а не абсолютная и установить ширину до 100%

Answer 2

По умолчанию div должен «заполнить ширину экрана», как это дисплей блок и ширина по умолчанию 100% (при использовании по умолчанию позиционирование div [который является статическим]).

Тем не менее, если вы хотите, чтобы «нижний» div начинался сразу после «верхнего» div (и вы хотите продолжать использовать абсолютное позиционирование в верхнем div), вы также можете сделать его положение абсолютным, а также установить top атрибут высоты верхнего div.

<div style="width: 1024px; margin: 0 auto;"> 
    <div style="position: absolute; height: 500px; top:0; left:0;"> 
    </div> 
    <div style="height: 100px; position:absolute; top:500px; left:0;"> 
     It's at the top of the upper div. 
    </div> 
</div> 

Answer 3

Ваши CSS должно быть что-то вроде этого:

section { 
display: block; 
width: 1024px; 
margin: 0 auto; 
} 

section div:nth-of-type(1) { 
height: 500px; 
} 

section div:nth-of-type(2) { 
height: 100px; 
} 

И ваш HTML что-то вроде этого:

<section> 
<div> 
</div> 

<div> 
Now it's where it should be. 
</div> 
</section>