как перемещать текст по странице сайта?
У меня есть текст, а как мне его перемещать ВНИЗ/ВВЕРХ, ВПРАВО/ВЛЕВО ?
Элемент можно двигать с помощью transform: translate(. ) :
Пусть в HTML файле у тебя есть: <h1 >Заголовок</h1> Тогда в css-файле нужно указать с помощью margin и padding:
Кинь текст в блок, потом для блока можешь сделать отступы с помощью margin и padding
Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css текст или задайте свой вопрос.
Site design / logo © 2022 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2022.6.10.42345
Нажимая «Принять все файлы cookie», вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Относительное позиционирование
Если задать значение relative для свойства position , то положение элемента устанавливается относительно его исходного места. Добавление свойств left , top , right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения. Положительное значение left определяет сдвиг вправо от левой границы элемента, отрицательное — сдвиг влево. Положительное значение top задаёт сдвиг элемента вниз (рис. 1), отрицательное — сдвиг вверх.
Рис. 1. Значения свойств left и top при относительном позиционировании
Свойства bottom и right производят обратный эффект. При положительном значении right сдвигает элемент влево от его правого края, при отрицательном — сдвигает вправо (рис. 2). При положительном значении bottom элемент поднимается вверх, при отрицательном опускается вниз.
Рис. 2. Значения свойств right и bottom при относительном позиционировании
Для относительного позиционирования характерны следующие особенности:
- элемент можно смещать относительно исходного положения с помощью свойств left , right , top и bottom ;
- при смещении элемента относительно исходного положения, место, которое занимал элемент, остаётся пустым и не заполняется ниже или вышележащими элементами;
- если сдвинуть элемент вправо за пределы окна браузера, то появится горизонтальная полоса прокрутки;
- если сдвинуть элемент вниз за пределы окна браузера, то появится вертикальная полоса прокрутки;
- смещение элемента влево и вверх за пределы окна браузера не оказывает влияния на полосы прокрутки;
- работает свойство z-index ;
- этот тип позиционирования неприменим к элементам таблицы вроде ячеек, строк, колонок и др.
В примере 1 показан сдвиг текста заголовка вниз для придания ему особого стиля написания.
Пример 1. Заголовок текста
Результат данного примера показан на рис. 3.
Рис. 3. Сдвиг текста относительно исходного положения
Относительное позиционирование часто применяется для создания анимации и эффектов, связанных со сдвигом элементов. В примере 2 с помощью элемента <button> добавляется кнопка с тенью, при наведении курсора на кнопку она смещается вправо и вниз на величину тени, а сама тень при этом прячется. Всё это в комплексе придаёт кнопке трёхмерный эффект.
Пример 2. Сдвиг кнопки
Наведите курсор на кнопку, чтобы увидеть анимацию в действии. Время движения кнопки определяется свойством transition.
Для относительно позиционированных элементов работает свойство z-index , которое управляет положением элементов по оси Z. Если требуется задать наложение элементов относительно друг друга, то в стилях достаточно указать position со значением relative без смещения самого элемента. В примере 3 выводятся картинки, при наведении на них курсора они увеличиваются в размерах и отображаются поверх остальных изображений.
Как сдвинуть текст вправо в html
Самое первое, когда говорят о позиции текст справа возникает конструкция :
Давайте этот способ позиционирования текст справа посмотрим на примере. Нам потребуется какой-то текст :
Создаем отдельный блок с этим текстом и классом:
Нужно написать свойство для текста :
Далее пойдет речь о классе(class) нужно располагать, либо в файле css, либо на странице, но тогда вам нужны теги стиля
Результат позиции текста справа:
Как видим, наш текст благополучно переместился вправо.
Отступ текста справа
Один из способов поставить текст справа — это свойство float
Возьмем самодельный тег red — он у нас имеет свойство цвета color = red. и добавим ему в attribute style loat: right:
Результат позиционирование текста справа с помощью float:
Впереди блока с текстом справа. нам нужен дополнительный текст.
здесь текст И ниже нам нужно показать, как будет вести себя данный текст справа в окружении другого текста. Написанный текст, будет обходить текст справа
Теперь посмотрим в коде, на данный текст который расположен справа
Вы и выше могли наблюдать, как наш блок с текстом оказался справа. И другой текст его обходил. Если мы посмотрим в коде на данный текст, то он показывается не там, где находится. смотрим на скрине. Показано стрелкой, где данный текст находится в коде, и где он находится в тексте, но расположен текст на странице справа от всего текста:
Теперь посмотрим в коде, на данный текст который расположен справа
Текст справа внутри блока.
<red style="float: right;">Этот текст справа</red>
Результат позиционирования текста справа.
Наш текст прекрасно позиционировался справа, чего мы и хотели.
Следующим пунктом разберем позиционирования с помощью «display: flex;»
Текст справа внутри блока(display: flex;).
Следующим пунктом — поставим текст справа внутри блока с помощью «display: flex;»
Нам понадобится div с классом «tekst_sprava»:
Внутрь поместим span с attribute style и покрасим задний фон background color в цвет «#ffa703;»
Далее пропишем свойства для класса «tekst_sprava»
Соберем весь код позиционирования текста справа
<span style="background: #ffa703;">Здесь текст справа</span>