Авторизация

Рубрики блога


Рекомендуем



Последние комментарии

Облако тегов


Устами великих

"Странный этот мир, где двое смотрят на одно и то же, а видят полностью противоположное." © Агата Кристи

Мы Вконтакте

Записки вебмастера Рубрика, которая призвана собрать коллекцию полезных скриптов и авторских решений, интересных особенностей и стандартов верстки, решение вопросов юзабилити и функционала, полезных ресурсов и программ.
23
Авг

Плавающий элемент CSS - фиксированное положение блока при прокрутке

рейтинг материал 3.8 (16) | количество просмотров 9777 | количество коментариев 1
Рассмотрим как с помощью CSS зафиксировать положение какого-либо элемента, которое будет неизменным на экране при прокрутке страницы.

Что такое блоки с фиксированным положением или "плавающие" блоки?

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

Где и как это можно использовать?

По большому счету, в блок с таким стилем можно запихнуть что угодно, что как вы считаете всегда должно быть "на глазах" у пользователя.

Это может быть и ссылки социальных закладок, а может быть и полноценное навигационное меню по сайту. Можно также встретить как кнопку-ссылку для активации какого-то сервиса - всплывающего окошка - чата, отзывов, предложений и пожеланий, корзин в интернет-магазинах. Реже встречается просто как баннер-оповещение от администрации или даже как рекламный баннер.

На сайтах с фиксированной шириной для таких блоков чаще всего выбирают позиционирование по внешней границе этого "тела" сайта.

А на сайтах с "резиновой" (изменяемой шириной сайта в зависимости от разрешения экрана) версткой, обычно, позиционируют такие блоки по краю окна.

Как это реализовать?

Для начала, нужен html код блока, который мы хотим отобразить, для простоты пусть это будет div блок с уникальным id (или уникальным классом) внутри которого мы расположим картинку.

<div id="alert-me">
<img width="64px" height="64px" src="http://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/actions/messagebox_warning.png" title="Внимание! Произошло что-то важное." />
</div>

А для того чтобы сделать этот блок "плавающим" пропишем такие настройки позиционирования в CSS, обращаясь к блоку на прямую через id:

<style> 
 #alert-me { 
 position:fixed; /* свойство позиционирования, которое делает блок плавающим */
 top:200px; /* расстояние блока от верхнего края экрана */ 
 left:0%; /* расстояние блока от левого края экрана */ 
 } 
</style>

Как видно из примера выше, настраивать размещение блока относительно краев экрана можно как четко указывая расстояние в пикселях так и в %. В данном случае получается что блок будет выровнен по левому краю с отступом в 200 пикселей от верхнего края.

В случае же если мы хотим разместить плавающий блок по краю "тела" на сайте с фиксированной шириной и, для примера, пусть эта ширина будет 900 пикселей, то код CSS будет выглядеть так:

<style> 
 #alert-me { 
 position:fixed; 
 top:200px; 
 left:50%; /* позиционируем блок по середине */
 margin-left:-450px; /* а затем отодвигаем его влево на расстояние равное половине тела сайта */
 } 
</style>
serovwa Всё работает, статейка норм, просто и всё по делу. Буду посещать вас по чаще. Наполняйте сайтик ещё) Спам
написал(а)
23 Янв 2017
в 15:55
0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]