Как подвинуть объект в css

Переместить объект, не влияя на вёрстку

Переместить объект, не влияя на вёрстку, можно через свойство transform: translate() .

.move-element < transform: translate(20px, 20px); >

Также через данный способ рекомендуется делать анимационные эффекты, когда надо передвинуть объект (например, вместо использования margin ).

Обновлено: 03 февраля 2021

Комментарии

Авторизуйтесь, чтобы добавлять комментарии

Вывод нескольких элементов в ряд (Flexbox)
Различия между float и flex
Хлебные крошки (Breadcrumbs)
Прижать футер к низу сайта
Выровнять дочерние элементы по ширине
Зафиксировать меню и сайдбар (position: sticky)
Вертикальное выравнивание
Порядок элементов (order)
Разница между «px», «em» и «rem»
8 советов вёрстки и настройки email-рассылок
Переместить объект, не влияя на вёрстку
Пример использования «box-decoration-break»

Функция translate()

Еще одна функция свойства transform — это translate() , с помощью которой можно переместить элемент с его начальной точки. Функция принимает два параметра — один для перемещения по оси X, второй — по оси Y.

Можно указывать числовые значения в любых единицах измерения длины в CSS. Если число положительное, элемент смещается вправо по оси X, вниз по оси Y. И, если число отрицательное, движение происходит влево и вверх соответственно.

translate(20px, 50px);

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

В нашем примере перемещаемый элемент прячется за соседними блоками:

Отдельные функции для осей

Вы также можете управлять перемещением элемента, используя отдельные функции translate для трех осей — translateX() , translateY() , translateZ() . Если в параметре translateZ() указано положительное число, перемещение элемента происходит вперед, если отрицательное — назад.

Функция 3D

Некоторые функции свойства transform имеют дополнительную 3D-версию себя, которая принимает три значения — для трех осей. Так, в расширенной функции translate3d() можно указать значения для X, Y и Z через запятую. Такие же вариации существуют и у некоторых ранее рассмотренных функций — rotate3d() и scale3d() .

Обратите внимание: если у вас не работает translateZ() или другая аналогичная функция, где затрагивается ось Z, не спешите паниковать. Дело в том, что движение по оси Z будет заметным лишь в том случае, если в CSS установлена перспектива. Мы разберем эту тему через один урок.

CSS позиционирование блока на странице

CSS делает возможным процесс позиционирования. position – CSS атрибут, определяющий позиционирование элементов страницы. Его значения: relative и absolute определяют соответственно относительное позиционирование и абсолютное позиционирование.

Относительное CSS позиционирование

Для начала создадим следующие элементы:

Применим относительное позиционирование:

Атрибуты и значения

relative – относительное позиционирование.
left – перемещение объекта слева направо.
top – перемещение объекта сверху вниз.
bottom – перемещение объекта снизу вверх.
right – перемещение объекта справа налево.

Относительное CSS позиционирование – процесс перемещения объектов относительно своего первоначального положения внутри страницы.

Расположим объекты внутри блока:

Применим относительное CSS позиционирование:

Увеличим количество объектов позиционирования:

Применим относительное CSS позиционирование:

Обратите внимание на то, сколько места занимает CSS код. Куда более рационально использовать внешний .css файл. Подробности в уроке включение CSS.

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

Атрибуты и значения

position:absolute – определяет абсолютное CSS позиционирование элементов web-страницы, при котором значения атрибутов top, right, bottom, left откладываются от границ окна браузера.
margin:0 auto – определяет центрирование блока.

Автор проекта — Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018

CSS позиции блока CSS позиционирование CSS позиция на сайте

Наложение элементов — CSS: Позиционирование элементов

В уроке про плавающие элементы вы могли увидеть, что элементы HTML могут накладываться друг на друга. Такое же поведение было при выставлении позиционирования отличного от нормального. Наложением элементов можно управлять и с помощью CSS-свойства z-index . Из названия свойства можно увидеть, что речь идет об оси z .

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

Возникнет естественный вопрос: «А где остальные два блока?». Они скрылись за последним блоком .block-three . Когда мы дали каждому блоку абсолютное позиционирование, то начали в одном и том же месте накладывать блоки друг на друга. Первым в угол встал блок .block-one , после этого у браузера возникла задача переместить блок .block-two ровно на это же место. Для этого он выставил приоритет по оси z второму блоку и наложил его на первый. Данная операция повторилась с последним блоком, и он занял видимую позицию, «заслонив» своих братьев.

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

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

Важным для понимания моментом является то, как браузер по умолчанию позиционирует элементы:

Первым всегда идет элемент HTML. Поверх него накладываются все остальные элементы.
Далее идут все элементы в нормальном потоке документа. Элементы идут по всем правилам расположения блочных и строчных элементов. Они позиционируются в том порядке, в котором определены внутри HTML-документа.
В конце накладываются все элементы с position в том порядке, в котором они определены внутри HTML-документа. Это можно увидеть на примерах выше.

Попробуем поменять порядок элементов в последнем примере. Для этого установим второму и третьему блоку такие значения, чтобы они поменялись местами. Необходимо для блока .block-two установить значение z-index больше, чем у блока .block-three . В результате третий блок «исчезнет», так как имеет меньшие размеры:

Свойство z-index может принимать отрицательные, положительные значения и ноль. Здесь нет никакой магии и отрицательные значения будут находиться «ниже» положительных. В реальных проектах хорошей практикой считается установка значения z-index с шагом в 100 при достаточно больших значениях. Это делается для удобства чтения и правок стилей:

z-index: 34234; z-index: 43233; z-index: 34324;

Определить, в каком порядке расположатся элементы, при таких значениях достаточно трудно. Необходимо вчитываться в каждую цифру. Сравните это с таким вариантом:

z-index: 34200; z-index: 43200; z-index: 34300;

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

130 курсов, 2000+ часов теории
1000 практических заданий в браузере
360 000 студентов

Наши выпускники работают в компаниях: