Как в css div перенести на право

Как переместить вложенный div вправо?

Я использую display:none для того чтобы в jquery показывать\скрывать элемент,т.к. с visibility:hidden работает не корректно. Но спасибо за ответ.Не знал про flex,блок и правда стал вправо,только не подходит по моему коду. Но ответ защитан как рабочий:)

17 авг 2018 в 9:17

свойство float:right; У дива родителя должна быть задана ширина

Отслеживать
ответ дан 16 авг 2018 в 19:48
BlackStar1991 BlackStar1991
5,813 3 3 золотых знака 19 19 серебряных знаков 60 60 бронзовых знаков

Задал такие параметры,но не помогло.Внутренний див остался слева: #reason_for_leaving < display:none; width:100%; margin-bottom:5px; >.reason_for_leaving < float:right; >

16 авг 2018 в 20:11

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

16 авг 2018 в 20:24

display:none стоит по умолчанию,чтобы при выборе определенного значения в другом селекте появлялся этот див со своим select. А мне нужно чтобы див reason_for_leaving находился справа, без анимации

Как работает 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

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

Свойство text-align наследуется, применяется к блочным элементам.
Выравнивает все содержащиеся в них строчные элементы и текст по горизонтали. Оно не перемещает сам элемент и не передвигает блоки, не работает, если задано строчному элементу. У него есть несколько значений, в том числе right , позволяющих сдвигать содержимое вправо.

Свойство margin-left не наследуется, применяется ко всем элементам. У него есть значение auto , которое выравнивает блочный элемент по горизонтали. А именно margin-left: auto; прижимает элемент к правому краю родителя. Это положение может изменяться свойством margin-right . При margin-left: auto; и margin-right: auto; элемент размещается по центру ширины предка.

Свойство float не наследуется, применяется ко всем элементам. Оно вынимает элемент из потока и прижимает к краю левой или правой стороны родителя. Элементы и текст, расположенные в коде после float-элемента, обтекают его с противоположной стороны.

Свойство position не наследуется, применяется ко всем элементам. position: absolute; вынимает элемент из потока и располагает поверх остального содержимого. Его можно перемещать относительно границ родителя, у которого значение position отлично от static , с помощью свойств top , right , bottom , left . При direction: ltr; свойство left имеет приоритет над свойством right , кроме случаев, когда свойство left имеет значение auto .

Свойство display не наследуется, применяется ко всем элементам. Элемент со значением table подобен тегу table , а table-cell — td . Также стоит обратить внимание на значение flex .

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

  
Свойство text-align наследуется, применяется к блочным элементам.   Выравнивает все содержащиеся в них строчные элементы и текст по горизонтали. Оно не перемещает сам элемент и не передвигает блоки, не работает, если задано строчному элементу. У него есть несколько значений, в том числе right, позволяющих сдвигать содержимое вправо.

  
Свойство margin-left не наследуется, применяется ко всем элементам.  У него есть значение auto, которое выравнивает блочный элемент по горизонтали. А именно margin-left: auto; прижимает элемент к правому краю родителя. Это положение может изменяться свойством margin-right. При margin-left: auto; и margin-right: auto; элемент размещается по центру ширины предка.

  
Свойство float не наследуется, применяется ко всем элементам.  Оно вынимает элемент из потока и прижимает к краю левой или правой стороны родителя. Элементы и текст, расположенные в коде после float-элемента, обтекают его с противоположной стороны.

  
Свойство position не наследуется, применяется ко всем элементам.  position: absolute; вынимает элемент из потока и располагает поверх остального содержимого. Его можно перемещать относительно границ родителя, у которого значение position отлично от static, с помощью свойств top, right, bottom, left. При direction: ltr; свойство left имеет приоритет над свойством right, кроме случаев, когда свойство left имеет значение auto.

  
Свойство display не наследуется, применяется ко всем элементам. Элемент со значением table подобен тегу table, а table-cell — td.