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

Question

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

http://www.rae-mx.com/test/css-layout.jpg

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

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

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

tia для справки.

Answer 1

Я думаю, вы не понимаете, как работает относительное позиционирование. Если что-то помечено как 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; } 

Посмотрите на Absolute and Relative Positioning. Это называется относительным + абсолютным позиционированием.

Answer 2

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

И помните: с позицией: абсолютный 0,0 верхним левым углом первых (ближе к элементу, при ходьбе от элемента и к корню) родителю с позицией: относительный или позиция: абсолютная