Как подвинуть блок вправо css

Как работает position: relative;

Элемент с position: relative; смещается на расстояние, указанное в свойствах top , right , bottom , left , от своего первоначального расположения. Размещение элемента над другими элементами правится с помощью свойства z-index .

После того, как свойство position примет значение relative , размер элемента не изменится, а соседние элементы не сдвинутся на освободившееся пространство.

Переместить элемент над другими элементами

Чтобы элемент «2» спрятался под другой часто неподвижный элемент «1», можно элементу «1» указать position: relative; , при котором не игнорируется свойство z-index .

position: relative;

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Элемент «1» Элемент «2» 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

 .relative background: lightpink; > .margin Элемент «1» Элемент «2»

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

position: relative; родителя и нижестоящего от родителя элемента z-index: 1; родителя
11 12 13 14 15 16 17 18 19 20

  1 2 3
 11 12 13 14 15 16 17 18 19 20

Сместить элемент в сторону так, чтобы соседние элементы остались на своих местах

исходное положение
элемент
position: relative

Cвойства top , right , bottom , left могут иметь как положительные, так и отрицательные значения в любых единицах измерения, а также в процентах. По умолчанию у них установлено значение auto .

position: relative; top: 4em;

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 Подвинусь на 3em вниз от первоначального расположения верхнего края элемента 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140

  Элемент

Элемент с top: -4em; примет то же положение, что и с bottom: 4em; . Элемент с left: -4em; примет то же положение, что и с right: 4em; .

top: -4em; bottom: 4em;

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 Подвинусь на 2em вверх от первоначального расположения верхнего края элемента 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140

  Элемент

При одновременном использовании свойств top и bottom , свойство bottom игнорируется. При одновременном использовании свойств left и right , свойство right игнорируется.

top: 4em; right: 4em; bottom: 4em; left: 4em;

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 Элемент 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140

  Элемент

Значения свойств top и bottom в процентах рассчитываются от высоты содержимого ближайшего не inline родителя, у которого height не auto .

height: 5em; ближнего родителя padding: 1em; ближнего родителя box-sizing: border-box; ближнего родителя

1 2 3 4 5 6 7 8 9 10
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Элемент 28 29 30 31 32 33 34 35 36 37 38 39 40
41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

  11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Элемент 28 29 30 31 32 33 34 35 36 37 38 39 40

Если height ближайшего родителя имеет значение auto , то height в процентах заменяется на height: auto; , при котором не работают свойства top и bottom в процентах у ближайших потомков.

height: 10em; дальнего родителя height: 50%; ближнего родителя
1 2 3 4 5 6 7 8 9 10
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Элемент 28 29 30 31 32 33 34 35 36 37 38 39 40
41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Элемент 28 29 30 31 32 33 34 35 36 37 38 39 40
 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

Значения свойств left и right в процентах рассчитываются от ширины содержимого ближайшего не inline родителя.

width: 10em; ближнего родителя (для left и right необязательно) padding: 1em; ближнего родителя box-sizing: border-box; ближнего родителя

  11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Элемент 28 29 30 31 32 33 34 35 36 37 38 39 40

Значения свойств top , right , bottom , left в процентах пропускают inline родителя.

height: 10em; дальнего родителя display: inline-block; ближнего родителя

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Элемент 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Элемент 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

Значение overflow отличное от visible у родителя прячет выходящую за границы часть дочернего элемента с первого экрана видимости.

Читать:

Как почистить кэш на samsung galaxy a50

overflow: visible; родителя (по умолчанию) overflow: auto; родителя overflow: hidden; родителя
1 2 3 4 5 6 7 8 9 10
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Элемент 28 29 30 31 32 33 34 35 36 37 38 39 40
41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

  11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Элемент 28 29 30 31 32 33 34 35 36 37 38 39 40

Указать родителя, в рамках которого будет перемещаться элемент с position: absolute;

position: relative; ближнего родителя
1 2 3 4 5 6 7 8 9 10

11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 Элемент 29 30 31 32 33 34 35 36 37 38 39 40 41 42

43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 Элемент 29 30 31 32 33 34 35 36 37 38 39 40 41 42
 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71

Передвинуть элемент с помощью свойства CSS margin
Передвинуть элемент с помощью свойства CSS transform: translate()

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

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

Для этого у родительского блока укажем следующие CSS свойства:

display: flex; justify-content: right;

Свойство justify-content как раз и отвечает за выравнивание элементов по главной оси.

Как перенести блок вправо? Html/css

Всех приветствую. Есть контейнер с максимальной шириной. И в нем два блока. Все это flex. Как это все передвинуть к концу экрана вправо? Justiny пробовал, не работает. Извиняюсь за тупые вопросы, я учусь

Отслеживать

задан 30 апр 2021 в 20:11

1 1 1 бронзовый знак

Что Вы имеете ввиду под «то все передвинуть к концу экрана вправо», что именно Вы хотите передвинуть вправо? Предоставьте лучше ваш html код.

30 апр 2021 в 20:47

Если вы имеете ввиду левый блок «The Cabins» и второй блок от него изображение, тогда их обёртке задайте justify-content: space-between; и текст встанет с левой стороны как и стоял, а изображение сдвинется в самый край. Если же как вы сказали они оба должны переместиться в право, тогда justify-content: flex-end; . Их обёртка при этом должна быть width: 100%; — так как я сейчас вижу, что она растянута не на всю ширину экрана.

Как сдвинуть блок вправо?

Подскажите, как сдвинуть блок на пару пикселей вправо
Подскажите как сдвинуть блок на пару пикселей вправо. Пример на картинке.

Как сдвинуть вправо и вниз цифры номера телефона через html код
В шапке сайта необходимо переместить номер тел, какой html код для этого прописать?

Не могу сдвинуть элемент вправо
Как сделать, чтобы номер телефона был справа только при максимальном разрешении экрана .col-lg.

105 / 93 / 50
Регистрация: 17.09.2015
Сообщений: 611

Лучший ответ

Сообщение было отмечено tmpnik1 как решение

Решение

ошибка в синтаксисе

Цитата Сообщение от tmpnik1 Посмотреть сообщение

margin-left:100px;
Регистрация: 28.02.2011
Сообщений: 1,780
Что-то всё равно не получается. сдвинуть блок вправо.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

 html> script> function test() < var _square = document.getElementById('square'); _square.style.marginLeft = ((parseInt(_square.style.marginLeft) + 1) + 'px'); >/script> style type="text/css"> #layer1 < width: 950; border: 4px solid blue; height: 30px; /* background: #fc0; >#layer1 P < padding: 10px; >#square < width: 30px; height: 30px; background: #cc0000; marginLeft: 2px; >/style> head> meta http-equiv="content-type" content="text/html; charset=utf-8" /> title> /title> /head> body> div id="layer1"> div id="square">/div> /div> p>/p> input type="button" value="Пуск" onClick="timer = window.setInterval('test()',1);"> input type="button" value="Стоп" onclick="clearInterval(timer);"/> p>/p> /body> /html>

Эксперт HTML/CSS

2964 / 2597 / 1068
Регистрация: 15.12.2012
Сообщений: 9,857
Записей в блоге: 11
tmpnik1, стили пишите внимательней.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

 html> script> function test() < var _square = document.getElementById('square'); _square.style.marginLeft = ((parseInt(_square.style.marginLeft) + 1) + 'px'); >/script> style type="text/css"> #layer1 < width: 950px; border: 4px solid blue; height: 30px; /* background: #fc0; >#layer1 P < padding: 10px; >#square < width: 30px; height: 30px; background: #cc0000; margin-left: 2px; >/style> head> meta http-equiv="content-type" content="text/html; charset=utf-8" /> title> /title> /head> body> div id="layer1"> div id="square">/div> /div> p>/p> input type="button" value="Пуск" onClick="timer = window.setInterval('test()',1);"> input type="button" value="Стоп" onclick="clearInterval(timer);"/> p>/p> /body> /html>

Регистрация: 28.02.2011
Сообщений: 1,780

да нет тут дело не в стиле( margin-left: 2px). -), это когда не получается, то пытаешься как-то изменить ситуацию, видать это был не тот вариант. с этим стилем я разобрался.. не понятно, почему после строчки _square.style.marginLeft = ((parseInt(_square.style.marginLeft) + 1) + ‘px’); квадратик не смещается вправо, хотя по формуле, он должен смещаться. т.к. увеличивается отступ.