Как двигать текст в css

как перемещать текст по странице сайта?

У меня есть текст, а как мне его перемещать ВНИЗ/ВВЕРХ, ВПРАВО/ВЛЕВО ?

Элемент можно двигать с помощью transform: translate(. ) :

Пусть в HTML файле у тебя есть: <h1 >Заголовок</h1> Тогда в css-файле нужно указать с помощью margin и padding:

Кинь текст в блок, потом для блока можешь сделать отступы с помощью margin и padding

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.3.11.43304

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как подвинуть текст внутри div?

Не могу понять как установить надпись «02», также как на примере выше. Можете подсказать?
Выходит, только так:

И вообще правильно ли я сверстал данный элемент?

Спасибо за помощь!

• Вопрос задан 16 апр. 2022
• 933 просмотра

Простой 2 комментария

• Facebook
• Вконтакте
• Twitter

0. Для начала, знакомьтесь, это валидатор html https://validator.w3.org/nu/
Он расскажет о том, что атрибут align устарел.

1. 02 это псевдоэлемент.

Т.е. либо у вас где-то должен быть нумерованный список, у него скрыта нативная нумерация, а затем добавлены псевдоэлементы и стилизованы. Если эта нумерация нужна не как украшение, а именно для восприятия.

Либо это просто номер страниц или глав (секций) или типа того. И тогда это просто псевдоэлемент. Если это только украшения.

Этот псевдоэлемент позиционируете с помощью гридов или абсолютом.

2. Картинка, которую вы даже называете словом fon.png должна быть сделана фоном. Она ведь не содержит никакого смысла, а является только украшением.
И слеши в путях пишутся в другую сторону, так /

3. Высоту в верстке задают очень редко (например, когда надо картинку вписать в блок). Мы почти никогда не знаем сколько будет контента на реальном сайте, какого размера шрифт у пользователя и т.д. Поэтому высота блока сама подстраивается по контенту. Если очень нужно, можно задать минимальную или максимальную высоту.

Функции CSS-трансформации

Трансформации к элементу применяются при помощи свойства transform . А значением для этого свойства являются функции трансформации.

Пример

Скопировать ссылку на секцию «Пример» Скопировано

Как понять

Скопировать ссылку на секцию «Как понять» Скопировано

Часто бывает необходимо каким-то образом трансформировать визуальное представление элемента (масштабировать, повернуть, переместить) и при этом никак не затронуть соседние элементы в документе. Для подобных преобразований используется свойство transform . В качестве значения выступают различные функции трансформации: rotate , translate , scale , skew и другие.

Функции трансформации можно условно разбить на несколько групп.

Функции перемещения

Скопировать ссылку на секцию «Функции перемещения» Скопировано

translate ( X , Y )

Скопировать ссылку на секцию «translate(X, Y)» Скопировано

Функция используется для смещения элемента вверх-вниз или влево-вправо. В целом, ту же работу выполняют CSS-свойства top , right , bottom , left — например, для абсолютно ( position : absolute ) или относительно ( position : relative ) спозиционированных элементов. Но есть ряд важных отличий: элемент позиционируется относительно соответствующих сторон родителя. То есть left : 20px сместит элемент на 20 пикселей относительно левой границы родителя, а translate ( 20px ) сместит элемент вправо относительно того места, где тот находился до трансформации. В целом, позиционирование и translate прекрасно сочетаются друг с другом. Позиционирование лучше использовать для изначального расположения элемента на странице, а translate применять, если нужно добавить анимации движения.

Функция принимает два параметра: первый параметр отвечает за смещение вправо-влево, а второй параметр — вверх-вниз. Если передать только один параметр, тогда смещение будет только вправо-влево. Мы можем использовать любые единицы измерения расстояния из CSS, например, абсолютные 10px или относительные 50 % . Абсолютное значение используется «как есть»: элемент сместится на 10 пикселей. Относительное значение считается относительно размеров самого элемента. При указании 50 % элемент сместится на половину собственной ширины или высоты.

translate X ( X ) , translate Y ( Y ) , translate Z ( Z )

Скопировать ссылку на секцию «translateX(X), translateY(Y), translateZ(Z)» Скопировано

Когда нужно сместить элемент вдоль конкретной оси, можно применить соответствующие функции трансформации.

translate3d ( X , Y , Z )

Скопировать ссылку на секцию «translate3d(X, Y, Z)» Скопировано

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

Функции масштабирования

Скопировать ссылку на секцию «Функции масштабирования» Скопировано

scale ( X , Y )

Скопировать ссылку на секцию «scale(X, Y)» Скопировано

Функция для масштабирования элемента. Значения X и Y — это положительные числа, либо 0. Если в функцию передать 0, то элемент не будет виден. Единица соответствует нормальному масштабу. Числа от 0 до 1 — это уменьшенный масштаб. Числа больше единицы — увеличенный масштаб. Например, чтобы визуально увеличить элемент в 2 раза, нужно написать transform : scale ( 2 ) .

В отличие от translate , один параметр в функции scale работает несколько иначе. scale ( 2 ) — это то же самое, что scale ( 2 , 2 ) , то есть одно число указывает на пропорциональное масштабирование по обеим осям одновременно.

scale X ( X ) , scale Y ( Y ) , scale Z ( Z )

Скопировать ссылку на секцию «scaleX(X), scaleY(Y), scaleZ(Z)» Скопировано

Используем, когда необходимо растягивать или сжимать элемент только по горизонтали, вертикали или третьей оси Z .

scale3d ( X , Y , Z )

Скопировать ссылку на секцию «scale3d(X, Y, Z)» Скопировано

Если нужно масштабировать элемент по всем трём осям, можно всё собрать в кучку и использовать эту функцию.

Функции наклона

Скопировать ссылку на секцию «Функции наклона» Скопировано

skew X ( X ) , skew Y ( Y )

Скопировать ссылку на секцию «skewX(X), skewY(Y)» Скопировано

Функции выполняют сдвиг одной стороны элемента относительно противолежащей. В результате элемент как бы наклоняется. Величина наклона зависит от положения точки применения трансформаций ( transform — origin ) и числа градусов, заданных в параметрах. skew X сдвигает верхнюю сторону элемента относительно нижней. skew Y — правую сторону относительно левой.

Функции поворота

Скопировать ссылку на секцию «Функции поворота» Скопировано

rotate X ( X ) , rotate Y ( Y ) , rotate Z ( Z )

Скопировать ссылку на секцию «rotateX(X), rotateY(Y), rotateZ(Z)» Скопировано

Кроме сдвига или наклона, элемент можно вращать. В функцию передаём единицы измерения углов ( deg , rad , turn ), например 45deg или 0 . 5turn . Обратите внимание, что обычное вращение элемента на странице — это вращение относительно оси Z . Если мы хотим вращать элемент относительно других осей, то нужно не забывать про перспективу. С ней повороты относительно X или Y будут выглядеть максимально естественно.

rotate ( Z )

Скопировать ссылку на секцию «rotate(Z)» Скопировано

Функция аналогична rotate Z ( Z ) . Чтобы не запоминать ось для типового вращения элемента, мы можем использовать просто слово rotate .

rotate3d ( X , Y , Z )

Скопировать ссылку на секцию «rotate3d(X, Y, Z)» Скопировано

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

Прочие функции

Скопировать ссылку на секцию «Прочие функции» Скопировано

matrix ( a , b , c , d , tx , ty )

Скопировать ссылку на секцию «matrix(a, b, c, d, tx, ty)» Скопировано

Выше мы упомянули несколько функций трансформации. Каждая выполняет какое-то одно небольшое действие. matrix ( ) — это функция, которой можно описать любую трансформацию в плоскости экрана. Она использует матричные преобразования и может заменить собой все вышеописанные функции. Но при этом она очень сложно читается. Например, глядя на функцию matrix ( 0 . 707107 , 0 . 707107 , — 0 . 707107 , 0 . 707107 , — 0 . 707107 , 34 . 6482 ) невозможно сразу точно определить, что она аналогична записи rotate ( 45deg ) translate ( 24px , 25px ) . Зачем же она нужна, такая сложная, если проще описать трансформации соответствующими функциями? Ну например, с её помощью можно писать сложные динамические анимации. Популярные JS-библиотеки для анимации «под капотом» используют как раз матричные преобразования, а не конкретные функции трансформации.

matrix3d ( a1 , b1 , c1 , d1 , a2 , b2 , c2 , d2 , a3 , b3 , c3 , d3 , a4 , b4 , c4 , d4 )

Скопировать ссылку на секцию «matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)» Скопировано

Если нам нужно произвести трансформации в трёхмерном пространстве, а не в плоскости экрана, то нужно использовать эту функцию. Она ещё более сложна в понимании, и вряд ли кто-то вообще пишет её руками.

perspective ( Z )

Скопировать ссылку на секцию «perspective(Z)» Скопировано

Несмотря на то, что экран плоский, у нас всё равно есть возможность перемещать элемент вдоль оси Z . Она направлена перпендикулярно плоскости экрана в сторону пользователя. Если мы используем translate Z просто так, то никакого перемещения ближе или дальше мы не увидим. Чтобы было ощущение движения к нам или от нас, элемент должен становиться крупнее или мельче. Стул, который стоит рядом с нами, будет визуально крупнее, чем стул, стоящий в конце комнаты. Эта разница в размерах — следствие перспективы. Элемент на экране может вести себя подобно объектам в реальном мире и менять размер при перемещении к нам или от нас. Чтобы это заработало, нужно элементу задать свойство perspective . Это свойство необходимо применять при любых трансформациях, выходящих из плоскости экрана.

Функция perspective ( ) принимает один параметр — расстояние до точки схождения перспективы. Плоскость экрана принимается за начало координат. Например, запись perspective ( 500px ) означает, что точка схождения перспективы находится как бы на расстоянии 500 пикселей вглубь от плоскости экрана.

Подсказки

Скопировать ссылку на секцию «Подсказки» Скопировано

�� Можно применять сразу несколько функций трансформации:

�� Если среди значений есть функция perspective ( ) , то она должна быть первой среди всех значений:

�� В последних версиях спецификации появились отдельные CSS-свойства для трансформаций. Это rotate , translate и scale . Если раньше мы писали комплексные трансформации, применяя несколько функций, то теперь каждую трансформацию можем описать отдельным свойством:

Оба этих способа записи выполнят одни и те же трансформации, но у них есть ряд принципиальных отличий. Самое главное — используя индивидуальные свойства, мы можем создавать классы-модификаторы без опасения перекрыть всё свойство transform :

В этом случае мы просто добавим масштабирование к элементу, какие бы свойства ни были ему заданы до этого. Подобный трюк не удастся провернуть со свойством transform :

Добавив этот класс к элементу, мы просто рискуем перекрыть любое свойство transform , заданное до этого.

�� При использовании свойства transform результирующая трансформация вычисляется с учётом порядка функций. Например, transform : rotate ( 15deg ) translate X ( 100px ) translate Y ( 30px ) и transform : translate X ( 100px ) translate Y ( 30px ) rotate ( 15deg ) ; дадут разный конечный результат:

Если же мы используем индивидуальные свойства, результат будет одинаковым вне зависимости от порядка свойств:

Второй пример корректно работает во всех современных браузерах, для более старых версий проверяйте поддержку на Can I use.

На практике

Скопировать ссылку на секцию «На практике» Скопировано

Саша Патлух советует

Скопировать ссылку на секцию «Саша Патлух советует» Скопировано

�� Полезное знание при работе с функциями трансформации из JavaScript.

Если мы вычисляем значение функции трансформации, заданной в CSS, методом get Computed Style ( ) , получим матрицу преобразований. А в случае получения значения из свойства style по ключу — получим строку с описанием функции трансформации.

Допустим, на странице есть div с такой трансформацией, описанной в CSS:

Вычисление из JS методом get Computed Style ( ) вернёт значение matrix ( 1 , 0 , 0 , 1 , 200 , 0 ) :

Но если стиль задан инлайном в HTML,

вы можете получить строку с более удобным для чтения и дальнейшей работы значением.

Методы позиционирования элементов в CSS

HTML-документ состоит из большого количества элементов, вложенных друг в друга. Чтобы из этих элементов и CSS построить изображение страницы , их необходимо как-то в ней расположить. По умолчанию размещение всех элементов на странице осуществляется в нормальном или базовом потоке .

Что это значит? Во-первых, вывод элементов на страницу браузер осуществляет в том порядке, в котором они следуют в HTML коде .

Во-вторых, в коде элементы вложены друг в друга, и чтобы это учитывать при выводе используют так называемые воображаемые слои для отображения элементов . При этом слой элемента тем выше (ближе к нам), чем данный элемент является более вложенным в коде, т.е. глубже расположен в нём.

В-третьих, положение элемента в потоке зависит от значения свойства display .

Например, элементы, имеющее блочное отображение ( display: block ) отображаются в потоке как прямоугольные области, каждый из них на новой линии друг под другом сверху вниз.

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

Элементы со строчным отображением ( display: inline ) выводятся иначе. Они в отличии от блочных элементов не размещаются каждый на новой строке, а следуют друг за другом слево направо. Если пространство справа закончилось, то они переносятся на следующую строку, а не на новую линию как элементы с блочным отображением.

Кроме block , inline есть и другие варианты отображения элементов, но все они располагаются в базовом потоке документа.

В CSS есть свойства, с помощью которых элементы можно «вырвать» из основного потока документа и задать им другое положение вне базового потока элементов.

К этим свойствам относятся position и float .

CSS-свойство position

CSS свойство position — это одно из свойств с помощью которого можно изменить базовое поведение элементов в потоке. Другими словами, данное свойство позволяет «выдернуть» любой элемент из потока документа и разместить его в другом месте относительно окна браузера или других элементов на веб-странице.

Свойство position имеет 5 значений:

• static (статичное позиционирование);
• relative (относительное);
• absolute (абсолютное);
• fixed (фиксированное);
• sticky (липкое).

static — это значение по умолчанию. Оно означает что элемент находится в базовом потоке.

Каждый элемент в потоке занимает определённую область. Но область элемента не всегда сохраняется за ним при его позиционировании.

Это, например, происходит при задании элементу position: absolute или position: fixed . В этом случае место не сохраняется за элементом. Другие элементы его «не видят» и располагаются, игнорируя его присутствие в коде.

Статичное позиционирование (static)

Свойство position со значением static элементам назначается по умолчанию . Это значение означает что элемент является не позиционированным , т.е. отображается как обычно (в потоке).

Явная установка элементу CSS-свойства position: static может понадобиться только в том случае, когда нужно переопределить другое значение position установленное элементу.

Установка CSS свойств для задания положения элемента left , top , right и bottom никакого влияния на него не оказывают, т.к. его местонахождение определяется потоком документа .

Пример выстраивания статично позиционированных элементов:

Относительное позиционирование (relative)

Установка относительного позиционирования элементу осуществляется посредством задания ему CSS свойства position: relative .

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

Например, для того чтобы элемент сдвинуть вверх или вниз относительного его исходного положения к нему нужно применить CSS свойство top или bottom :

Если одновременно установить top и bottom , то будет применено значение top , т.к. оно является более приоритетным, чем bottom :

Для сдвига элемента вправо или влево используется CSS свойство left или right :

Если одновременно установить left и right , то приоритетным будет значение, находящееся в left :

Для сдвига по двум осям нужно использовать top или bottom , и left или right :

Пример, в котором 2 элементу установим относительное позиционирование и сместим его на 20px вверх и влево относительно его исходного положения:

Если в некоторой области страницы оказываются несколько позиционированных элементов, то они перекрывают друг на друга в определённом порядке. При этом по умолчанию выше оказывается тот элемент, который ниже описан в коде. Но порядок перекрытия элементов (их положение перпендикулярное экрану, т.е. вдоль оси Z) можно изменить. Осуществляется в CSS это с помощью свойства z-index . z-index может принимать отрицательные и положительные целые число, auto и 0 . Но, хорошей практикой является использование в качестве z-index чисел из диапазона 0-9999 .

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

Абсолютное позиционирование (absolute)

Установка абсолютного позиционирования элементу осуществляется посредством задания ему position: absolute .

Этот тип позиционирования позволяет разместить элемент именно там, где вы хотите.

Позиционирование выполняется относительно ближайшего позиционированного предка.

Под позиционированным элементом понимается элемент с position , равным relative , absolute , fixed или sticky .

В этом примере позиционирование элемента #id-3 будет выполнять относительно #id-2 , т.к. он является позиционированным и является по отношению к нему более близким предком.

Если данный элемент не был бы позиционированным, то позиционирование #id-3 выполнялось бы относительно #id-1 :

Если среди предков у элемента с position: absolute нет позиционированного элемента, то в этом случае он будет позиционироваться относительно HTML страницы, т.е. элемента body .

Когда элементу устанавливаем position: absolute без указания CSS-свойств ( top , left , right и bottom ), определяющих его положение , он будет находиться в том месте, в котором он был бы расположен, если бы находился в потоке (при этом при вычислении его положения учитываются только элементы, расположенные до него в коде и находящиеся в потоке).

При этом другие элементы его видеть не будут, и, следовательно, они будут расположены на странице, не обращая никакого внимание на него.

CSS-свойства для управления положением абсолютно позиционированного элемента работают по-другому чем с position: relative .

CSS-свойства top , bottom , left и right задают положение элемента относительно ближайшего позиционированного предка или body , если такого предка нет.

Установить ширину (высоту) абсолютно позиционированному можно с помощью установки ему двух координат top и bottom ( left и right ).

Если элементу одновременно установить top , bottom и height , то предпочтение будет отдано top и height .

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

Фиксированное позиционирование (fixed)

Задание элементу фиксированного позиционирования осуществляется посредством установки ему position: fixed .

Фиксированное позиционирование похоже на абсолютное, но в отличии от него оно всегда привязывается к краям окна браузера (viewport), и остаётся в таком положении даже при скроллинге страницы.

Фиксированное позиционирование применяется для закрепления на странице навигационных меню, кнопки «вверх», панелей с социальными кнопками и многого другого.

Совместное использование относительного и абсолютного позиционирования

Относительное позиционирование очень часто используется вместе с абсолютным позиционированием.

1. Если расположить блоки с абсолютным позиционированием в блок с относительным, то расстояния будут уже задаваться не от края окна браузера, а от границ относительного блока.
2. Например: для создания фиксированных макетов состоящих из 3 блоков, выровненных по верхнему краю. Установим высоту «400px» относительному блоку для наглядности .
3. Дополнительно к блокам можно применять свойство z-index , которое предназначено для позиционирования элементов по оси Z. Чем больше значение свойства z-index , тем ближе элемент расположен к нам, и наоборот, чем меньше значение, тем дальше расположен элемент от нас.