CSS/Неподвижный DIV

Иногда нам приходится сталкиваться с тем, чтобы какая-то часть интерфейса веб-приложения (например, панель инструментов) оставалась всегда видимой, даже если посетитель (пользователь) прокручивает страницу вниз. Для этого у элементов div существует специальный CSS-параметр position, а для отключения прокручивания блока вместе с остальной страницы у этого параметра существует специальное значение — fixed.

Рассмотрим фиксированную позицию на примере:

.element {
position: fixed;
}

Другие виды позиции

Помимо фиксированного положения div на странице, также можно задать static, absolute и inherit.

Статичная позиция

При значении параметра, равном static, все элементы будут отображаться друг за другом так, как это было определено в HTML-документе.

.element {
position: static;
}

Данное значение является значением по умолчанию.

Абсолютная позиция

Здесь стоит привести фрагмент описания данного значения на интернет-ресурсе css.manual.ru:

Позиция элемента смещается относительно родительского элемента вверх, вниз, вправо или влево (зависит от того, какое свойство применено: top, right, bottom или left), а так же нарушается порядок отображения элементов. Элементы, следующие за ним располагаются так, словно его нет на странице.

.element {
position: absolute;
}

Родительская позиция

При использовании значения inherit автоматически используется значение, заданное у родительского элемента.

<!-- Допустим, у родительского элемента значение параметра position равно fixed -->
.parent {
position: fixed;
}
<!-- В таком случае, такое же значение будет у элемента класса .element в случае, если его родительским элементом будет .parent -->
.element {
position: inherit;
}

Использование в HTML:

...
<div class="parent">
<div class="element">
<!-- Something... -->
</div>
</div>
<!-- Значение параметра position у div класса .element будет равно значению данного параметра у div класса .parent -->
<div class="parent">
<!-- Something... -->
</div>
<div class="elemet">
<!-- Something... -->
</div>
<!-- А в данном случае этого не произойдет. -->