Как подвинуть блок в 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; ближнего родителя

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
 

Значения свойств 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 у родителя прячет выходящую за границы часть дочернего элемента с первого экрана видимости.

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

подскажите, как переместить блок .rmenu после

.text_block : HTML:

 
some text
 
 

.rmenu < position: absolute; left: 990px; top: -2px; >.text_block

То есть на css сделать так, чтобы блок .rmenu оказался визуально после тега
Отслеживать
задан 12 окт 2018 в 11:28
theblackpost theblackpost
437 5 5 серебряных знаков 17 17 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

.content < display: flex; flex-direction: column; >.content p < order: 1; >.rmenu < order: 3; >.text_block

 
b1
 
b2
 
some text
 

Как пример flex и order. Попробуйте с ним.

По вашему примеру совсем не понятно зачем нужен тут position absolute и нужен ли он тут вообще. Но если можно обойтись без него, то этот вариант подойдёт

Отслеживать
ответ дан 12 окт 2018 в 11:53
1,115 5 5 серебряных знаков 15 15 бронзовых знаков
попробую перевести в relative
12 окт 2018 в 12:50

• html
• css
• position

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

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

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

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

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

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

display: flex; justify-content: right; 

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

2.4. CSS-позиционирование

CSS рассматривает макет html-документа как дерево элементов. Уникальный элемент, у которого нет родительского элемента, называется корневым элементом. Модуль CSS-позиционирование описывает, как любой из элементов может быть размещен независимо от порядка документа (т.е. извлечен из «потока»).

В CSS2 каждый элемент в дереве документа генерирует ноль или более блоков в соответствии с блочной моделью. Модуль CSS3 дополняет и расширяет схему позиционирования. Расположение этих блоков регулируется:

• размерами и типом элемента,
• схемой позиционирования (нормальный поток, обтекание и абсолютное позиционирование),
• отношениями между элементами в дереве документа,
• внешней информацией (например, размер области просмотра, внутренними размерами изображений и т.д.).

Схемы позиционирования

• Содержание:
• 1. Содержащий блок
• 2. Выбор схемы позиционирования: свойство position
• 3. Смещение блока: свойства top, right, bottom, left
• 4. Обтекание: свойство float
• 5. Управление потоком рядом с плавающими элементами: свойство clear
• 6. Определение контекста наложения: свойство z-index
• 6.1. Контекст наложения

В CSS блок элемента может быть расположен в соответствии с тремя схемами позиционирования:

Нормальный поток

Нормальный поток включает блочный контекст форматирования (элементы с display block , list-item или table ), строчный (встроенный) контекст форматирования (элементы с display inline , inline-block или inline-table ), и относительное и «липкое» позиционирование элементов уровня блока и строки.

Обтекание

В обтекающей модели блок удаляется из нормального потока и позиционируется влево или вправо. Содержимое обтекает правую сторону элемента с float: left и левую сторону элемента с float: right .

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

В модели абсолютного позиционирования блок полностью удаляется из нормального потока и ему присваивается позиция относительно содержащего блока. Абсолютное позиционирование реализуется с помощью значений position: absolute; и position: fixed; .

Элементом «вне потока» может быть плавающий, абсолютно позиционированный или корневой элемент.

1. Содержащий блок

Положение и размер блока(ов) элемента иногда вычисляются относительно некоторого прямоугольника, называемого содержащим блоком элемента (containing block). В общих словах, содержащий блок — это блок, который содержит другой элемент. В случае нормального потока корневой элемент html является содержащим блоком для элемента body , который, в свою очередь, является содержащим блоком для всех его дочерних элементов и так далее. В случае позиционирования содержащий блок полностью зависит от типа позиционирования. Содержащий блок элемента определяется следующим образом:

• Содержащий блок, в котором находится корневой элемент, представляет собой прямоугольник — так называемый начальный содержащий блок.
• Для некорневого элемента с position: static; или position: relative; содержащий блок формируется краем области содержимого ближайшего родительского блока уровня блока, ячейки таблицы или уровня строки.
• Содержащим блоком элемента с position: fixed; является окно просмотра.
• Для некорневого элемента с position: absolute; содержащим блоком устанавливается ближайший родительский элемент со значением position: absolute/relative/fixed следующим образом:
  — если предок — элемент уровня блока, содержащим блоком будет область содержимого плюс поля элемента padding ;
  — если предок — элемент уровня строки, содержащим блоком будет область содержимого;
  — если предков нет, то содержащий блок элемента определяется как начальный содержащий блок.
• Для «липкого» блока содержащим блоком является ближайший предок с прокруткой или окно просмотра, в противном случае.

2. Выбор схемы позиционирования: свойство position

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

Свойство не наследуется.

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

Относительно позиционированный блок создает новый содержащий блок для абсолютно позиционированных потомков.

Отступы margin абсолютно позиционированных блоков не схлопываются.

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

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

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

position: static; position: relative; position: absolute; position: sticky; position: fixed; position: initial; position: inherit;

3. Смещение блока: свойства top, right, bottom, left

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

top
Значение:
auto	Влияние значения зависит от типа элемента. Значение по умолчанию.
длина	Смещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются.
%	Процентные значения вычисляются относительно высоты содержащего блока. Для «липкого» блока — относительно высоты корневого элемента. Отрицательные значения допускаются.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

top: 10px; top: 2em; top: 50%; top: auto; top: inherit; top: initial;

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

right
Значение:
auto	Влияние значения зависит от типа элемента. Значение по умолчанию.
длина	Смещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются.
%	Процентные значения вычисляются относительно ширины содержащего блока. Для «липкого» блока — относительно ширины корневого элемента. Отрицательные значения допускаются.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

right: -10px; right: .5em; right: -10%; right: auto; right: inherit; right: initial;

Свойство right указывает расстояние, на которое правый край абсолютно позиционированного блока (с учетом его margin ) смещен влево от правого края содержащего блока. Для относительно позиционированных блоков определяет смещение относительно правого края самого блока.

bottom
Значение:
auto	Влияние значения зависит от типа элемента. Значение по умолчанию.
длина	Смещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются.
%	Процентные значения вычисляются относительно высоты содержащего блока. Для «липкого» блока — относительно высоты корневого элемента. Отрицательные значения допускаются.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

bottom: 50px; bottom: -3em; bottom: -50%; bottom: auto; bottom: inherit; bottom: initial;

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

left
Значение:
auto	Влияние значения зависит от типа элемента. Значение по умолчанию.
длина	Смещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются.
%	Процентные значения вычисляются относительно ширины содержащего блока. Для «липкого» блока — относительно ширины корневого элемента. Отрицательные значения допускаются.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

left: 50px; left: 10em; left: 20%; left: auto; left: inherit; left: initial;

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

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

4. Обтекание: свойство float

Обтекание позволяет блокам смещаться влево или вправо на текущей строке. «Плавающий блок» смещается влево или вправо до тех пор, пока его внешний край не коснется края содержащего блока или внешнего края другого плавающего блока. Если имеется линейный блок, внешняя верхняя часть плавающего блока выравнивается с верхней частью текущего линейного блока.

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

Правила, регулирующие поведение плавающих боков, описываются свойством float .

Свойство не наследуется.

float
Значение:
none	Отсутствие обтекания. Значение по умолчанию.
left	Элемент перемещается влево, содержимое обтекает плавающий блок по правому краю.
right	Элемент перемещается вправо, содержимое обтекает плавающий блок по левому краю.
inherit	Наследует значение свойства от родительского элемента.

float: left; float: right; float: none; float: inherit;

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

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

Свойство автоматически изменяет вычисляемое (отображаемое в браузере) значение свойства display на display: block для следующих значений: inline , inline-block , table-row , table-row-group , table-column , table-column-group , table-cell , table-caption , table-header-group , table-footer-group . Значение inline-table меняет на table .

Свойство не оказывает влияние на элементы с display: flex и display: inline-flex . Не применяется к абсолютно позиционированным элементам.

5. Управление потоком рядом с плавающими элементами: свойство clear

Свойство clear указывает, какие стороны блока/блоков элемента не должны прилегать к плавающим блокам, находящемся выше в исходном документе. В CSS2 и CSS 2.1 свойство применяется только к неплавающим элементам уровня блока.

Свойство не наследуется.

clear
Значение:
none	Означает отсутствие ограничений на положение элемента относительно плавающих блоков. Значение по умолчанию.
left	Смещает элемент вниз относительно нижнего края любого плавающего слева элемента, находящемся выше в исходном документе.
right	Смещает элемент вниз относительно нижнего края любого плавающего справа элемента, находящемся выше в исходном документе.
both	Смещает элемент вниз относительно нижнего края любого плавающего слева и справа элемента, находящемся выше в исходном документе.
inherit	Наследует значение свойства от родительского элемента.

clear: none; clear: left; clear: right; clear: both; clear: inherit;

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

6. Определение контекста наложения: свойство z-index

В CSS каждый блок имеет позицию в трех измерениях. В дополнение к горизонтальному и вертикальному положению, блоки выкладываются вдоль оси Z друг над другом. Положение вдоль оси Z особенно важно, когда блоки визуально накладываются друг на друга.

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

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

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

Свойство не наследуется.

z-index
Значение:
auto	Вычисляется в 0 . Если для блока задано position: fixed; или это корневой элемент, значение auto также устанавливает новый контекст наложения. Значение по умолчанию.
целое число	Определяет положение блока в текущем контексте наложения. Также устанавливает новый локальный контекст наложения. Можно использовать любое целое число, включая отрицательные числа. Отрицательные значения помещают элемент вглубь экрана.
inherit	Наследует значение свойства от родительского элемента.
initial	Устанавливает значение свойства в значение по умолчанию.

z-index: auto; z-index: 0; z-index: 5; z-index: 999; z-index: -1; z-index: inherit; z-index: initial;

6.1. Контекст наложения

Если для элементов свойства z-index и position не заданы явно, контекст наложения равен порядку их расположения в исходном коде и браузер отображает элементы на странице в следующем порядке:

• Корневой элемент , который содержит все элементы веб-странице.
• Блочные элементы, неплавающие и непозиционированные.
• Плавающие float непозиционированные элементы в порядке их расположения в исходном коде.
• Строковые непозиционированные элементы (текст, изображения).
• Позиционированные position элементы в порядке их следования в исходном коде. Последний из них будет расположен на переднем плане.

Свойство z-index создает новый контекст наложения. Оно позволяет изменить порядок наложения позиционированных элементов. Элементы будут отображаться на странице в следующем порядке (если для них не заданы свойства, влияющие на контекст наложения — opacity , filter , transform ):

• Корневой элемент , который содержит все элементы веб-странице.
• Позиционированные элементы с отрицательным значением z-index .
• Блочные элементы, неплавающие и непозиционированные.
• Плавающие float непозиционированные элементы в порядке их расположения в исходном коде.
• Строковые непозиционированные элементы (текст, изображения).
• Позиционированные элементы со значениями z-index: 0; и z-index: auto; .