Как переместить текст в css

Чтобы переместить текст в CSS, необходимо использовать свойство position.

Свойство position задает тип позиционирования элемента на веб-странице. Есть несколько типов позиционирования: static, relative, absolute, fixed и sticky.

Рассмотрим каждый тип позиционирования более подробно:

1. static — это значение по умолчанию для всех HTML-элементов. Элементы с позиционированием static отображаются в соответствии с обычным потоком документа.
2. relative — элемент с позиционированием relative отображается в соответствии со стандартным потоком документа, но может быть перемещен с помощью свойств top, bottom, left и right. Значения свойств top, bottom, left и right определяют расстояние, на которое нужно переместить элемент относительно его исходного местоположения.
3. absolute — элемент с позиционированием absolute отображается относительно ближайшего родительского элемента с позиционированием, которое не равно static. Если таких родительских элементов нет, элемент с позиционированием absolute отображается относительно страницы.
4. fixed — элемент с позиционированием fixed отображается относительно окна браузера и остается на своем месте, даже если пользователь прокручивает страницу.
5. sticky — элемент с позиционированием sticky отображается в соответствии со стандартным потоком документа, пока пользователь прокручивает страницу. Затем элемент «прилипает» к указанной позиции и остается на своем месте, пока пользователь не прокрутит страницу обратно.

Чтобы переместить текст, необходимо использовать свойства top, bottom, left и right в сочетании с одним из перечисленных выше типов позиционирования, например:

div {
  position: relative;
  left: 50px;
  top: 50px;
}

В этом примере мы установили позиционирование элемента <div> как relative и переместили его на 50px вправо и 50px вниз относительно его исходного местоположения. Это приведет к тому, что текст внутри элемента <div> переместится на 50px вправо и 50px вниз относительно его исходной позиции.