Назад
Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс




Поиск по сайту




Наш чат в Telegram для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @it_rostov

Зафиксированный на экране блок

Для просмотра эффекта фиксации блока воспользуйтесь прокруткой страницы







Исходный код этого примера:
<style>
[class*="Banner"] {
  position: fixed;
  height: auto;
  width: 200px;
  padding: 10px;
  text-align: left;
  background-color: #77F5FE;
  border: solid 1px;
}
.Banner {
  border-color: red;
}
.Banner-top {
  border-color: blue;
  top: 130px;
  left: 30px;
}
.Banner-bottom {
  border-color: green;
  bottom: 4px;
  right: 10px;
}
</style>

<div class="Banner">Этот блок зафиксирован в потоке вывода</div>
<div class="Banner-bottom">Этот блок зафиксирован относительно низа рабочей области экрана</div>
<div class="Banner-top">Этот блок зафиксирован относительно верха рабочей области экрана</div>

.