Чтобы переместить текст в CSS, необходимо использовать свойство position.
Свойство position задает тип позиционирования элемента на веб-странице. Есть несколько типов позиционирования: static, relative, absolute, fixed и sticky.
Рассмотрим каждый тип позиционирования более подробно:
- static — это значение по умолчанию для всех HTML-элементов. Элементы с позиционированием static отображаются в соответствии с обычным потоком документа.
- relative — элемент с позиционированием relative отображается в соответствии со стандартным потоком документа, но может быть перемещен с помощью свойств top, bottom, left и right. Значения свойств top, bottom, left и right определяют расстояние, на которое нужно переместить элемент относительно его исходного местоположения.
- absolute — элемент с позиционированием absolute отображается относительно ближайшего родительского элемента с позиционированием, которое не равно static. Если таких родительских элементов нет, элемент с позиционированием absolute отображается относительно страницы.
- fixed — элемент с позиционированием fixed отображается относительно окна браузера и остается на своем месте, даже если пользователь прокручивает страницу.
- sticky — элемент с позиционированием sticky отображается в соответствии со стандартным потоком документа, пока пользователь прокручивает страницу. Затем элемент «прилипает» к указанной позиции и остается на своем месте, пока пользователь не прокрутит страницу обратно.
Чтобы переместить текст, необходимо использовать свойства top, bottom, left и right в сочетании с одним из перечисленных выше типов позиционирования, например:
div {
position: relative;
left: 50px;
top: 50px;
}
В этом примере мы установили позиционирование элемента <div> как relative и переместили его на 50px вправо и 50px вниз относительно его исходного местоположения. Это приведет к тому, что текст внутри элемента <div> переместится на 50px вправо и 50px вниз относительно его исходной позиции.
