Главная или честный способ заработка в сети Зачем мне это? Всё начинается с идеи

Фиксированное позиционирование блоков

Фиксированные блоки не прокручиваются вместе с веб-страницей. Чтобы сделать блок фиксированным нужно свойству position задать значение fixed. Рассмотрим пример.

<html>
 <head>
  <title>Пример фиксированного блока.</title>
  <link rel="stylesheet" type="text/css" href="style11.css">
 </head>
 <body>
  <div id="fixed">Фиксированный блок</div>
  <div id="nofixed">Нефиксированный блок</div>
 </body>
</html>

Теперь таблица стилей:

#fixed {
position:fixed;
left:10px;
top:10px;
width:200px;
height:150px;
border-style:solid;
border-color:red;
border-width:1px;
text-align:center;
}
#nofixed {
position:absolute;
left:300px;
top:150px;
width:150px;
height:150px;
border-style:solid;
border-color:green;
border-width:1px;
text-align:center;
}

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


<<Предыдущая | В раздел | Следующая>>