Не однократно писал, что проблемы связанные с использованием position:fixed; по прямому назначению или игнорируются, или не понимаются. К сожалению, очень многие не удосуживаются копнуть чуть глубже.
Об этом говорит, начало топика, его более или менее конструктивная часть.
Сразу замечу, возможные вопросы о том, зачем это нужно, о целесообразности предлагаемого вам метода, вы должны решать для себя самостоятельно.
В том, что подобного рода разметка, выполненная чисто на html и css без привлечения JavaScript, часто бывает необходимой по тем или иным причинам, можно почитать здесь.
Не смотря на то, что статья написана давно, она не потеряла своей актуальности и ныне.
Пусть там рассматривается частный случай, применительно к размещению рекламных блоков, это не меняет сути дела.
Опять же, статья предназначена для тех, кто не только знает буковки русского алфавита, а может понимать смысл, заложенный в состоящие из них слова и предложения.
Итак.
В чем главная проблема прямого применения position:fixed;? Пока не будем говорить о том, что это не работает в IE6.
Все дело в том, что любой контейнер/блок, которому указано фиксированное позиционирование, позиционируется относительно границ окна браузера.
Любые, подчеркиваю любые ваши действия направленные на то, чтобы другие блоки, просто текст, в них заключенный, не важно имеют ли они строгое указание фиксированной ширины или нет, графика, практически всегда имеющая фиксированные размеры, будут при уменьшении размеров окна браузера с появлением горизонтальной прокрутки, если вы ее попытаетесь подвигать, или наезжать или если прятаться, под фиксированный блок, тут все зависит от значения z-index.
Было предпринято бесчисленное количество попыток, сделать эмуляцию данного стилевого правила для IE6.
Вот примеры, которые наглядно показывают, о чем идет речь, в них меняем размеры окна браузера.
В первом случае, а разметка адаптирована для 1024*768, при большем разрешении экрана монитора на повестку дня выходит еще одна проблема – пустое место между областью контента и фиксированной колонкой.
Пример номер два. Тот же принцип разметки, но предпринята попытка с помощью JavaScript, избавиться от пустоты между колонками при разных разрешениях.
Скрипт описан в статье …Ликбез
Согласитесь, но это не совсем то, что нам бы хотелось.
А хотелось бы вот чего.
Фиксированный блок/контейнер, находящийся в любом месте страницы всегда должен быть доступен, иначе весь смысл его теряется. Далее, при уменьшении размеров окна браузера, с появлением горизонтальной прокрутки, игры с ней не должны приводить к вот такому, этот пример не надо смотреть в IE6, так же меняем размеры окна браузера.
Есть ли возможность избежать всех перечисленных выше неприятностей?
Ответ был дан в статье …Откроем карты.
Да, тут есть проблема с OPERA, страница, открытая в разных версиях, может быть, как с горизонтальной прокруткой, так и без нее. Остается только надеяться, что свою оплошность, производители браузера исправят, и он будет вести себя от версии к версии более предсказуемо.
Предлагаемые вам примеры, показывают возможное расположение фиксированной колонки. Этим применение метода/приема, понятное дело не ограничивается.
Все в ваших руках.
Совсем не обязательно, чтобы фиксированный блок был стопроцентной высоты. Тут может быть несколько подобных контейнеров расположенных друг под другом. Также, вы можете сделать header или горизонтальное меню, которое всегда будет перед глазами, тоже касается и footer.
Можно вообще окружить область контента фиксированными блоками.
Во всех случаях нужно учитывать, что нахождение курсора мыши над фиксированным блоком не позволяет прокручивать страницу, колесиком оной.
Но если вы откроете блог по ссылке Fixed находящейся в вертикальном меню в секции: "Смени дизайн", то можете увидеть, что и эта проблема решаема.
Горизонтальный banner counters.php - width:494px;