Relative css: z-index — CSS: Cascading Style Sheets

Leave a Comment / Css / By /

Сдвинуть блок (position: relative;) | CSS примеры

Элемент с 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 

<style>
.
 
 relative {
  background: lightpink;
}
.margin {
  margin-left: -5em;
  background: lightcyan;
}
</style>

<span>Элемент «1»</span>
<span>Элемент «2»</span>

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

position: relative; родителя и нижестоящего от родителя элементаz-index: 1; родителя

1 2 3

11 12 13 14 15 16 17 18 19 20



<style>
div:first-child {
}
div {
  border: 1px solid red;
}
span {
  position: absolute;
  width: 10em;
  height: 5em;
  background: lightpink;
}
</style>

<div>
  1 2 3
  <span></span>
</div>
<div>
  11 12 13 14 15 16 17 18 19 20
</div>

исходное положение

элемент
position: relative

top

-bottom

left

-right

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 

<style>
.relative {
  background: lightpink;
}
</style>

<span>Элемент</span>

Элемент с 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 

<style>
.relative {
  position: relative;
  top: -4em;
  background: lightpink;
}
</style>

<span>Элемент</span>

При одновременном использовании свойств 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 

<style>
.relative {
  position: relative;
  background: lightpink;
}
</style>

<span>Элемент</span>

Значения свойств 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 

<style>
.raz {
  border: 1px solid red;
}
.relative {
  position: relative;
  top: 100%;
  background: lightpink;
}
</style>

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

Если 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 

<style>
.raz {
  border: 1px solid red;
}
.raz div {
  border: 1px solid red;
}
.relative {
  position: relative;
  top: 100%;
  background: lightpink;
}
</style>

<div>
  1 2 3 4 5 6 7 8 9 10
  <div>
    11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
    <span>Элемент</span>
    28 29 30 31 32 33 34 35 36 37 38 39 40
  </div>
  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
</div>

Значения свойств 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 

<style>
.raz {
  border: 1px solid red;
}
.relative {
  position: relative;
  left: 100%;
  background: lightpink;
}
</style>

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

Значения свойств 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 

<style>
.raz {
  border: 1px solid red;
}
.raz mark {
  height: 5em;
  border: 1px solid red;
}
.relative {
  position: relative;
  top: 100%;
  background: lightpink;
}
</style>

<div>
  1 2 3 4 5 6 7 8 9 10
  <mark>
    11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
    <span>Элемент</span>
    28 29 30 31 32 33 34 35 36 37 38 39 40
  </mark>
  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
</div>

Значение 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 

<style>
.raz {
  height: 5em;
  border: 1px solid red;
}
.relative {
  position: relative;
  top: 100%;
  background: lightpink;
}
</style>

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

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

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 

<style>
. raz {
  position: relative;
  border: 1px solid red;
}
.raz div {
  border: 1px solid red;
}
.absolute {
  position: absolute;
  top: 0;
  left: 0;
  background: lightpink;
}
</style>

<div>
  1 2 3 4 5 6 7 8 9 10
  <div>
    11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
    <span>28 Элемент 29</span>
    30 31 32 33 34 35 36 37 38 39 40 41 42
  </div>
  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
</div>

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

CSS- свойство position определяет положение элемента на веб-странице. Существует несколько типов позиционирования: static, relative, absolute, fixed, sticky, initial и inherit. Разберемся, что означают эти типы:

  • Static- это значение свойства по умолчанию. Элементы располагаются в том порядке, в котором они отображаются на веб-странице.
  • Relative- элемент позиционируется относительно своего стандартного положения.
  • Absolute- элемент позиционируется абсолютно по отношению к первому позиционированному родителю.
  • Fixed- элемент позиционируется относительно окна браузера.
  • Sticky- элемент позиционируется на основе позиции прокрутки пользователя.

Теперь поговорим о двух наиболее часто используемых значениях свойства position — relative и absolute.

  • Что такое относительное позиционирование CSS?
    • HTML
    • CSS
  • Что такое абсолютное позиционирование CSS?
    • HTML
    • CSS

Когда вы устанавливаете положение относительно элемента, без добавления других атрибутов позиционирования (top, bottom, right, left), ничего не произойдет. При добавлении дополнительной позиции, например left: 20px, элемент переместится на 20 пикселей вправо от своей обычной позиции. То есть, элемент смещается относительно себя самого. При этом другие элементы не будут затронуты.

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

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

<div>First element</div> 
<div>Second element</div>
#first_element { 
  position: relative; 
  left: 30px; 
  top: 70px; 
  width: 500px; 
  background-color: #fafafa; 
  border: solid 3px #ff7347; 
  font-size: 24px; 
  text-align: center; 
} 
#second_element { 
  position: relative; 
  width: 500px; 
  background-color: #fafafa; 
  border: solid 3px #ff7347; 
  font-size: 24px; 
  text-align: center; 
}

Позиционирование выполняется относительно первого позиционированного родительского элемента. В случае, когда родительского элемента нет, позиционирование будет осуществляться непосредственно по отношению к элементу HTML (самой странице).

В следующем примере для родительского элемента задано относительное позиционирование. Теперь, когда мы используем для дочернего элемента значение absolute, любое дополнительное позиционирование будет выполняться относительно родительского элемента. Дочерний элемент перемещается относительно вершины родительского элемента на 100 пикселей и правее родительского элемента на 40 пикселей.

<div id=”parent”>
  <div id=”child”></div>
</div>
#parent { 
  position: relative; 
  width: 500px; 
  height: 400px; 
  background-color: #fafafa; 
  border: solid 3px #9e70ba; 
  font-size: 24px; 
  text-align: center; 
} 
#child { 
  position: absolute; 
  right: 40px; 
  top: 100px; 
  width: 200px; 
  height: 200px; 
  background-color: #fafafa; 
  border: solid 3px #78e382; 
  font-size: 24px; 
  text-align: center; 
}

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

Вадим Дворниковавтор-переводчик статьи «CSS Position Relative vs Position Absolute»

Относительная позиция CSS | Как выполняется относительная позиция в CSS?

При разработке страниц в HTML может потребоваться изменить положение всех элементов страницы в соответствии со страницей или макетом. Например, при загрузке страницы один элемент будет располагаться в одном месте, другой — в другом, или оба элемента должны располагаться относительно друг друга. Чтобы реализовать это, свойства позиции позволяют указать, какой тип позиции должен иметь элемент в соответствии с требуемыми сценариями, такими как «фиксированная», «относительная», «липкая», «абсолютная» и т. д. в вашем HTML-коде. В CSS Position Relative мы увидим, как мы можем позиционировать различные элементы на HTML-странице, используя свойства позиции CSS на некоторых примерах.

Синтаксис:

позиция: значение;

Теперь вопрос в том, какие разные значения доступны? Это в основном разные типы должностей. Для этого вы можете обратиться к приведенной ниже таблице значений, в которой описаны различные типы позиций.

Значение Описание
статический Если элемент определен как статический, то он всегда будет иметь позицию в соответствии с обычным потоком страницы. Это условие, когда ничего не определено как элемент в дизайне HTML-страницы. Это также значение по умолчанию. Статический элемент не меняет своего положения.
фиксированный Если элемент определен как статический, то элемент всегда будет иметь фиксированную позицию относительно точки обзора или страницы. Он всегда находится в одном и том же месте, даже если мы прокручиваем страницу.
абсолютный  Несмотря на то, что имя является абсолютным, если элемент определен как абсолютный, то элемент всегда будет иметь позицию, которая является относительной по отношению к его ближайшему соседнему элементу, а не к точке обзора или странице. Если соседа нет, то он будет позиционироваться относительно тела документа и его перемещение будет связано с прокруткой страницы
родственник Если элемент определен как относительный, то элемент всегда будет иметь положение в соответствии с определенными значениями его положения, такими как: слева, справа, сверху, снизу относительно нормального положения, и его перемещение связано с прокруткой страница.
липкий Если элемент определен как относительный, то элемент всегда будет следовать за прокруткой страницы и придерживаться прокрутки. Липкие элементы никогда не покидают пользователя, когда он прокручивает веб-страницу.

Как выполняется относительная позиция в CSS?

Вам просто нужно указать требуемое значение позиции в соответствии с синтаксисом в вашем HTML-коде, чтобы получить эту позицию в выводе.

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

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

Ниже приведены примеры относительной позиции CSS:

Пример #1

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

Код:








Я подчинен в относительной позиции моего родителя

Я супер в абсолютной позиции

< /body>

Вывод:

Пример #2

В этом примере вы увидите, как два разных элемента расположены по отношению друг к другу. Мы расположили второй элемент на 40 пикселей левее первого элемента. Второй элемент также на 150 пикселей выше первого элемента. Внимательно изучите коды, чтобы понять, как вы можете расположить несколько элементов на одной странице в соответствии с нашими требованиями, когда мы разрабатываем страницу HTNL с помощью значений позиции CSS.

Код:







1-й элемент

2-й элемент


Вывод:

Пример №3

В этом примере вы видите один элемент, который расположен относительно макета страницы в соответствии с желаемыми значениями пикселей.

Код:






Первый элемент


Вывод:

3 90

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

Код:








Этот элемент находится в относительном положении;


Вывод:

Example #5

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

Код:







Я нахожусь в относительном положении;
Я нахожусь в абсолютной позиции;



Результат:

Заключение

На этом мы завершаем изучение темы «Относительное положение CSS». Как видите, мы реализовали различные позиции в наших примерах HTML-кода с помощью CSS. Эта статья будет полезна тем, кто связан с HTML-дизайном веб-страниц с использованием CSS. Изучение кодов будет неполным, если вы не будете писать код самостоятельно. Удачного кодирования!!

Рекомендуемые статьи

Это руководство по CSS Position Relative. Здесь мы обсудим краткий обзор CSS Position Relative и его работы вместе с примерами и реализацией кода. Вы также можете просмотреть другие предлагаемые нами статьи, чтобы узнать больше —

  1. Команды CSS
  2. Таблица цветов CSS
  3. Вопросы на собеседовании по CSS
  4. Тень CSS

Относительное положение CSS и абсолютное положение

Свойство положения CSS определяет, как следует из названия, как элемент позиционируется на веб-странице.

Если вам интересно почитать о свойствах шрифта, вам могут быть интересны статьи об относительном размере шрифта и столбцах CSS.

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

  • Статический — это значение по умолчанию, все элементы расположены в том порядке, в котором они отображаются в документе.
  • Родственник — элемент позиционируется относительно своего нормального положения.
  • Абсолютный — элемент позиционируется абсолютно относительно своего первого родителя.
  • Исправлено — элемент позиционируется относительно окна браузера.
  • Sticky — элемент позиционируется в зависимости от положения прокрутки пользователя.

Теперь, когда мы объяснили основы, мы поговорим о двух наиболее часто используемых значениях позиции — 9.0007 относительное и абсолютное .

Что такое относительное позиционирование?

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

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

После этого краткого объяснения нам нужно подтвердить его, показав пример.

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

HTML 

 
Первый элемент


Второй элемент

CSS 

 #первый_элемент {
  положение: родственник;
  слева: 30 пикселей;
  верх: 70 пикселей;
  ширина: 500 пикселей;
  цвет фона: #fafafa;
  граница: сплошная 3px #ff7347;
  размер шрифта: 24px;
  выравнивание текста: по центру;
}
#второй_элемент {
   положение: родственник;
   ширина: 500 пикселей;
   цвет фона: #fafafa;
   граница: сплошная 3px #ff7347;
   размер шрифта: 24px;
   выравнивание текста: по центру;
}

Что такое абсолютное позиционирование?

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

Абсолютное позиционирование выполнено относительно первого относительно (или абсолютно) позиционированного родительского элемента . В случае, когда нет позиционированного родительского элемента, элемент с абсолютной позицией будет позиционироваться связанным непосредственно с элементом HTML (самой страницей) .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *