JoomDom - Скачать шаблоны для Joomla, модули и компоненты для сайтов бесплатно.

Карта сайта Контакты Главная

Полезности

Наши партнеры

Архив новостей

Сентябрь 2018 (13)
Август 2018 (16)
Июль 2018 (18)
Июнь 2018 (20)
Май 2018 (13)
Апрель 2018 (17)
1  2  3  4  5  5  7  8 

Авторизация

Опрос

Мои среднемесячные расходы на хостинг

Больше 1001 руб.
От 501 до 1000 руб.
От 201 до 500 руб.
от 1 до 200 руб.
Пользуюсь бесплатным

Реклама

Реклама

Реклама

Реклама

Счетчики


Яндекс.Метрика

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

Позиционируем всплывающий блок по центру экрана
Позиционировать относительно экрана не сложно. Размещаем перед закрывающим body нужное количество всплывающих блоков, назначаем им всем position:absolute, display:none – его мы поменяем на block в момент всплывания, z-index побольше, чтобы точно выше других был в стопке, и позиционируем себе.

HTML

...
...


CSS
.alert {
position:relative;
display:none;
z-index:10000;
width:300px;
height:200px;
left:50%; // левый верхний угол по центру по горизонтали
top:50%; // левый верхний угол по центру по вертикали
margin-left:-150px; // сместили на половину ширины влево
margin-right:-100px; // сместили на половину высоты вправо
}

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

Позиционируем всплывающий блок относительно родительского (drop menu)
1. Создаем блок, относительно которого будет позиционироваться всплывающий. Например, на сайте http://doctorvet.info верхнее меню содержит два таких блока – “Личная жизнь”, справа и слева.

2. Внутри (!) основного блока создаем всплывающий.

3. Далее задаем стили.

HTML

...

...

...


...

CSS
.daddy {
position:relative;
z-index:10000;
}
.child {
position:absolute;
display:none;
left:0;
top:30px; // например
// ширину и высоту задаем, если они не должны определятся по содержимому
}
.daddy:hover child {
display:block;
}

Если нужно сделать всплывающим блок, который позиционируется не относительно родительского, а относительно своей нормальной позиции, но при этом ведет себя как абсолютно позиционируемый (т.е. не влияет на другие блоки), то используем для смещения margin-left и margin-top. Теорию этого дела можно почитать в статье о блочной верстке.





Позиционирование всплывающих блоков


Опубликовано: 11-08-2016, 06:43   Комментариев Категория: Статьи Просмотров Просмотров: 845

Другие новости на эту тему:

Теги к статье:

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

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.