Как разместить относительный элемент после абсолютного элемента и заставить родительский div расширяться, чтобы соответствовать детям?

Я пытаюсь понять css, поэтому я изо всех сил старался сделать мой экспериментальный код ниже как можно более общим.

У меня есть простая страница с двумя ящиками, я хотел, чтобы один из ящиков был определен определенным образом, что в соответствии с тем, почему установка атрибута `right` CSS нажимает элемент слева? требует, чтобы я установил свою позицию так position:absolute Однако теперь я хочу добавить некоторые div, которые опускаются ниже моего абсолютного div, кроме того, я бы хотел, чтобы родительский div расширялся, чтобы соответствовать размеру дочерних div.

     #outer { position : relative; background-color : green; width : 500px; height : 500px; /* overflow : hidden; */ /* I know from working with floating elements inside divs that this works * to cause parent divs to exand out around floating children, but this * does not do the same thing here, it lops off the bottom of the child divs * if I un-comment the preceding line! */ } #inner { position : absolute; background-color : blue; height : 400px; width : 400px; top : 10px; right : 20px; } #top_object { position : absolute; top : 450px; } .object { position : relative; width : 450px; height : 200px; background-color : yellow; margin-bottom : 25px; } /* The followsing was suggested by: https://stackoverflow.com/questions/1709442/make-divs-height-expand-with-its-content But has no effect! */ .clear { clear : both; }    
Top Object
Second Object

Я хотел бы иметь свой первый div с объектом classа и id top_object, расположенный на абсолютном расстоянии от вершины, как кажется. Тем не менее, мне хотелось бы, чтобы дальнейшие объекты divs проходили ниже верхнего объекта. Другими словами, я хочу использовать top_object для определения абсолютной позиции для первого экземпляра div с объектом classа, а затем следующие естественные streamи с объектами classа естественным образом стекают по странице с 25px маржами, установленными в margin:25px; .object , следуя top_object без необходимости устанавливать top:XXXpx; каждого объекта top:XXXpx; атрибут отдельно.

Мой первый вопрос: почему мой второй объект появляется над моим первым объектом и как я могу заставить relative позиционированные объекты течь ниже absolute позиционного объекта?

Во-вторых, как мне получить фоновый div для расширения и вокруг дочерних div, когда плавающие divs не используются?

Кроме того, я стараюсь понять, что происходит, хотя я бы ответил на прямой ответ на мой вопрос, я хотел бы услышать объяснение, почему то, что я делаю, является неправильным, и почему любое решение исправит его. Я хочу понять логику css, не так много, чтобы увидеть конкретный fragment кода, который исправляет проблему, хотя это тоже было бы неплохо!

position: absolute; полностью переносит этот объект из streamа документов. Таким образом, он будет отображаться именно там, где вы скажете, что это будет с вашим top: 450px и right или left селекторами. Это позиционирование не повлияет на какой-либо другой элемент вашей страницы (если вы не #top_object другой объект, который, безусловно, произойдет без z-index ). Если вы хотите, чтобы все было помещено ниже #top_object вам нужно просто #top_object с ним вправо или влево, а затем дайте ему все, что вам нужно, чтобы разместить его.

Кроме того, overflow: hidden будет отсекать все, что находится за пределами определенной ширины или высоты, поэтому вам нужно определить min-width и min-height, а затем использовать overflow: auto вместо скрытого.