CSS-макет для DIVs боковой панели и нижнего колонтитула

Question

У меня есть контейнер, который расположен относительно и содержит div s для заголовка, боковой панели, основного содержимого и нижнего колонтитула.

Моя проблема с компонентами боковой панели и нижнего колонтитула. С моей боковой панелью мне пришлось позиционировать это абсолютно с указанными верхним и левым значениями (у него также установлен z-индекс из 10).

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

К сожалению, мой сайт еще не размещен и поэтому не может указать вам на него.

Answer 1

Я использую absolute позиционирование довольно часто. Надо просто знать, как с этим работать. Что нужно сделать, исходя из вашего описания, это установить position: relative в нижнем колонтитуле, а затем установить его на z-index выше, чем на боковой панели (исходя из ваших чисел, по крайней мере 11).

Answer 2

Придерживайтесь HTML Layout Gala и все будет в порядке.

Абсолютное позиционирование для макета не рекомендуется, за исключением очень специфических случаев.