CSS position: fixed
Элемент со значением fixed размещается относительно окна просмотра (viewport), поэтому он остаётся на том же месте даже при прокрутке страницы. Его окончательное положение задаётся с помощью top, right, bottom и left.
Фиксированный элемент не оставляет промежутка там, где он обычно находился бы.
Пример
Фиксированный div находится в нижнем правом углу и остаётся там при прокрутке.
<style> задайте классу div.fixed position fixed, bottom 0, right 0, width 300px и сплошную зелёную рамку 3px. Добавьте фиксированный div в нижнем правом углу и достаточно контента для прокрутки страницы, чтобы фиксированный элемент оставался на месте.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: fixed</h2>
<p>Scroll the page. The fixed element stays in the lower-right corner.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
<div class="fixed">This div has position: fixed.</div>
</body>
</html>
CSS position: absolute
Элемент со значением absolute размещается относительно ближайшего позиционированного предка (у которого position отличен от static). Если позиционированного предка нет, используется тело документа, и элемент двигается вместе с прокруткой страницы.
Примечание: Абсолютно позиционированные элементы удаляются из обычного потока и могут перекрывать другие элементы.
Пример
Div с position absolute размещается относительно своего родителя с position relative.
<style> создайте родительский div.relative с position relative, шириной, высотой и зелёной рамкой; и дочерний div.absolute с position absolute, top 80px, right 0, меньшими шириной и высотой, и красной рамкой. Вложите div.absolute внутрь div.relative, чтобы он размещался относительно родителя.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid green;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid red;
}
</style>
</head>
<body>
<div class="relative">This div has position: relative.
<div class="absolute">This div has position: absolute, placed relative to the parent.</div>
</div>
</body>
</html>
Позиционирование текста поверх изображения
Позиционирование также можно использовать для размещения текста поверх изображения, в таких местах, как слева сверху, справа сверху, слева снизу, справа снизу или по центру. PromptCookbook содержит ссылку на полный пример для каждой позиции.