Положение div внутри контейнера div без содержания верхнего div, влияющего на положение нижнего div

Question

Я пытаюсь выполнить следующий макет,

http://www.rae -mx.com / тест / CSS-layout.jpg

и я почти там, за исключением последнего зеленого div, который становится все ниже и ниже в зависимости от содержимого содержимого (белого) div. Если я установлю значение для свойства TOP для зеленого div, а затем добавлю еще текст в div содержимого, зеленый div будет все меньше и меньше.

Так как зеленый div является дочерним по отношению к основному контейнеру div, а зеленый div относительно позиционирован, разве он не должен быть размещен конкретно в позиции, указанной его значением TOP? Если я ошибаюсь ... может кто-нибудь сказать мне, как я могу сделать так, чтобы зеленый div всегда отображался в одном и том же месте внутри контейнера (серый), независимо от высоты содержимого / белого div?

Я пытался вставить сюда код CSS, но у меня были проблемы с браузером. Вы можете увидеть исходный код / ​​css на сайте http://www.rae -mx.com / test

TIA за помощь.

Answer 1

Если вы хотите, чтобы что-то было расположено в одном месте, используйте вместо него position: absolute. Положение: относительный используется для перемещения элемента после того, как он был помещен в нормальный поток.

* 1002.

Answer 2

Я думаю, вы не понимаете, как работает относительное позиционирование. Если что-то помечено как position: relative, то это не делает ничего для позиционирования этого элемента Однако любые элементы-потомки с position: absolute располагаются относительно этого элемента.

Итак, основной скелет того, что вы хотите:

#main { position: relative; }
#menu { position: absolute; top: 10; right: 10; }
#content { position: absolute; top: 30; }
#contact { position: absolute; top: 180; right: 10; }

Взгляните на Абсолютное и относительное позиционирование . Это называется относительным + абсолютным позиционированием.