Как зафиксировать элемент, чтобы он оставался на одном месте при прокрутке страницы?

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

 Для того, чтобы закрепить какой-то элемент, будь то картинка или div или ещё бог знает чего, необходимо задать свойство position со значением fixed.

Это зафиксирует элемент на экране и при прокрутке он не будет двигаться. Если вы хотите так же задать позицию на экране, где должен располагаться элемент используйте свойства top, left, bottom, right. Которые задают координаты элемента относительно сторон экрана, т.е. не зависят от того, сколько высоты страницы прокручено.

Так же часто бывает, что даже при использовании position вы не видите зафиксированный элемент, если у вас уже написано куча кода или он не ваш, то скорее всего его перекрывают другие элементы с большими значениями z-index. Подробнее об этом вы можете прочитать в нашей статье - Слои на задний/передний план при помощи CSS: z-indexлои на задний/передний план при помощи CSS: z-index.

Вот пример кода, который будет фиксировать блок с текстом на странице:

<div class="fix_block">Фиксированный блок</div>

div.fix_block {
	position: fixed; 
	top: 100px; 
	left: 30px; 
	padding: 20px; 
	border: 1px solid #000;
}

Результат вы все так же можете увидеть слева.