Позиционирование блока относительно родителя с помощью position:fixed
За столь продолжительный период верстки сегодня мне впервые пришлось столкнуться с необходимостью разместить на странице фиксированный блок (используя CSS-свойство position:fixed), который бы при скролле страницы всегда сидел в одном месте окна браузера. Информацию по этому поводу я, естественно, почитал на разных блогах и форумах. Но ...
Комментарии (50)
правый блок уплывает под основной контент, при уменьшении ширины
Есть такой плагинчик для ВП — там фиксированный блок мягко подплывает сверху к верхнему краю окна при скроллинге и всегда остается наверху: LC-StatusLine http://ardy.or.id/2007/11/19/wordpress-plugins-limosin-creative-status-line.xhtml
В общем, тоже может пригодится — зависит от целей :)
Для каждого агента можно делать свой стиль или нужно, пока сам в размышлениях
Выглядит отлично и вообще может быть полезно для размещения навигации или невысокого сайдбара.
Заметил только один небольшой глючок – при уменьшении окна до возникновения горизонтальной прокрутки блок ведёт себя эээ… ненормально :)
Проверял только на Opera 9.50, на последнем билде.
Позитивно.
Еще посмотри на Полноценный fixed в MSIE, а то твой пример в шестом ИЕ прыгает капец некрасиво.
Блин, извиняюсь, до конца не дочитал, думал статья уже кончилась, но всё же, в IE6 блок прыгает, как ни крути.
Да, я знаю. Но этого не избежать, по крайней мере, я не знаю способа для устранения данного недостаток. Но, я считаю, он не существенен, поскольку пользователей с разрешением 800х600 – менее 5% (это в РУнете). Однако, на случай просмотра такой страницы с мобильных устройств данный метод, получается, не подходит.
sonika, я встречал такие штуки. Без ява-скрипта они работать не будут. Мой же пример сделан на голом CSS, за исключением IE6.
Не понял, о чем ты говоришь.
Чуть выше я ответил по этому поводу.
Прыгает, потому что я специально не добавил фоновый прозрачный рисунок, чтобы можно было наглядно увидеть, КАК он нехорошо прыгает :)
Интересно для чего это применялось?
Для баннера и картинки RSS-подписки.
Пойдёт статейка для начинающих)
Dimox – спасибо за позновательные статьи, каждый раз читаю и нахожу что то новое и интересное:)
Нет, Дмитрий не очень хороший вариант :)
Для Вадима Lasto, а здесь улучшенный вариант: http://time-info.info/show/
по моему сделал проще, и без expression.
Минус твоего решения и в том, что при разных разрешениях все будет разваливаться.
Так же при уменьшении размеров окна браузера, фиксированный блок не прячется под областью контента, а отрывается от нее, но все равно часть его остается не доступной.
Тут не должно быть компромиссов :)
Хм..
gordi, благодарю. По ссылке нашел отличное решение.
Рыскал по Интернету, но не нашёл нужный пример. Мне необходимо зафиксить полноценно в родительском блоке элемент, т.е. если родительский элемент не на всю высоту документа и он вне зоны видимости, то и “блок, который фиксируем” вне зоны видимости. Надеюсь, изложил понятно свою мысль. Никто с таким примером не сталкивался? Заранее благодарен.
В Опере 9.27 наблюдается глюк – страница не прокручивается, пока не отключишь ява-скрипты.
Что будет разваливаться? Если разрешение экрана 1024х768 и выше, ничего не разваливается! Зачем вообще брать во внимание разрешения ниже 1024х768? Мы живем в 21 веке.
Сергей, твой вариант тоже не очень хорош – фиксированный блок начинает прятаться под основной, когда ширина окна браузера примерно 1250 пикселей и ниже, т.е. фиксированный блок виден на разрешениях, начиная от 1280px и выше, при том, что ширина всего контентного блока – 1000px.
К тому же в FireFox’e (2-я версия) наблюдается некрасивый эффект – та часть основного блока, которая при сужении окна закрывает фиксированный блок, ужасно дергается.
ИМХО, в твоем варианте минусов больше, чем в моем.
Im Eugene, в вашем случае нужно использовать
position: absolute
.№ 14
>В Опере 9.27 наблюдается глюк
Тут попытался решить проблему для разных разрешений через скрипт,
чтобы между колонками по сравнению дефолтом 1024*768, при более высоком разрешении не было пустоты, может получилось не совсем удачно :), но похоже это правильный путь.
Сам макет заточен именно под 1024*768 и во всех браузерах – IE6(7), FF, OPERA 9.23
не вижу проблем описанных тобой.
А OPERA вообще и с position:absolute; и с position:fixed; как кошка, что гуляет сама по себе :)
Писал об этом у себя на блоге.
Да в FF есть такая неприятность :), но на сколько это критично?
Дима, в твоем варианте, у меня в IE6 фиксированный блок сваливается под область контента. Могу прислать скрин.
Насчет fixed не уверен, но с absolute я в Опере никогда не наблюдал проблем.
Весьма странно. У меня в нем же все на месте.
Да. Все здорово. Вот только у меня body уже дает свой фон на сайте. Но, думаю, можно закрыть глаза на этот баг.
Извините за идиотский вопрос: – это что и зачем?
LisenOK, это называется условными комментариями, которые используются для Internet Explorer. “if lt IE 7” – обозначает условие “если версия IE меньше 7-й.