Relative html: position | htmlbook.ru - Блог сумасшедшего сисадмина

position | htmlbook.ru

position — Веб-технологии для разработчиков

position | CSS | WebReference

Синтаксис

Примеры

Доступность

Характеристики

Совместимость с браузером

Краткая информация

Синтаксис

Обозначения

Значения

Пример

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

Объектная модель

Браузеры

Типы позиционирования

Значения

Формальный синтаксис

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

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

Фиксированное позиционирование

Липкое позиционирование

Производительность и доступность

Легенда

HTML

CSS

HTML

CSS

HTML

CSS

Содержание

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	4.0+	1.0+	1.0+	1.0+	1.0+

CSS 1	CSS 2	CSS 2.1	CSS 3

Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.

position: absolute | fixed | relative | static | inherit

absolute: Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.
fixed: По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Браузер Firefox вообще не отображает полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента.
relative: Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.
static: Элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к каким-либо результатам.
inherit: Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

 <!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>position</title>
  <style>
   .layer1 {
    position: relative; /* Относительное позиционирование */
    background: #f0f0f0; /* Цвет фона */
    height: 200px; /* Высота блока */
   }
   .layer2 {
    position: absolute; /* Абсолютное позиционирование */
    bottom: 15px; /* Положение от нижнего края */
    right: 15px; /* Положение от правого края */
    line-height: 1px;
   }
  </style>
 </head>
 <body>
  <div>
   <div>
     <img src="images/girl.jpg" alt="Девочка" />
   </div>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства position

[window.]document.getElementById(«elementID»).style.position

Браузер Internet Explorer 6 значение fixed не поддерживает. Internet Explorer до версии 8.0 не поддерживает значение inherit.

Свойство css position указывает, как элемент позиционируется в документе. top, right, bottom и left определяют конечное местоположение позиционированных элементов.

Исходный код этого интерактивного примера хранится в GitHub репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

Позиционируемый элемент — это элемент, у которого вычисленное значение position является relative, absolute, fixed либо sticky. (Другими словами, это вce, кроме static.)
Относительно позиционируемый элемент является элементом, вычисленное значение position которого является relative. Свойства top и bottom определяют смещение по вертикали от его нормального положения; свойства left и right задают горизонтальное смещение.
Абсолютно позиционируемый элемент — это элемент, чьё вычисленное значение position является absolute или fixed. top, right, bottom и left задают смещения от краёв содержащего блок элемента. (Содержащий блок является предком, относительно которого расположен элемент.) Если элемент имеет поля, они добавляются к смещению. Элемент устанавливает новый контекст форматирования блока (BFC) для своего содержимого.
Элемент с липкой позицией — это элемент, у которого значение вычисленного

position является sticky. Он рассматривается как относительно позиционированный до тех пор, пока содержащий его блок не пересечёт указанный порог (например, установка top в значение, отличное от auto) внутри его корня потока (или в контейнере, в котором он прокручивается), после чего он обрабатывается как «застрявший» до тех пор, пока не встретит противоположный край содержащего его блока.

В большинстве случаев абсолютно cпозиционированные элементы, которые имеют height и width установленные в auto, имеют размер, соответствующий их содержимому. Тем не менее, незамещаемые, абсолютно cпозиционированные элементы можно сделать такими, чтобы они заполнили доступное вертикальное пространство, указав как

top, так и bottom, и оставляя height неопределенным (то есть , auto). Ими также можно заполнить доступное горизонтальное пространство, указав как left, так и right, и оставляя width как auto.

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

Если указаны top и bottom (технически, не auto) — приоритет будет у top.

Если указаны left и right: приоритет будет у left, когда direction ltr (английский язык, горизонтальный японский и т. д.), приоритет будет у right, когда direction является rtl (персидский , Арабский, иврит и т. д.).

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

static: Это значение позволяет элементу находиться в обычном его состоянии, расположенном на своем месте в документе. Свойства top, right, bottom, left и z-index не применяются к данному элементу. Это значение по умолчанию.
relative: Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно себя на основе значений top, right, bottom и left. Смещение не влияет на положение любых других элементов; таким образом, пространство, заданное для элемента в макете страницы, такое же, как если бы позиция была static.; Это значение создает новый контекст наложения, когда значение z-index не auto. Его влияние на элементы table-*-group, table-row , table-column, table-cell и table-caption не определено.
absolute: Элемент удаляется из обычного потока документов, и для элемента в макете страницы не создается пробела. Он расположен относительно его ближайшего относительно позиционированного предка, если таковой имеется; в противном случае он помещается относительно исходного содержащего блока. Его конечная позиция определяется значениями top, right, bottom, и left.; Это значение создаёт новый контекст наложения, когда значение z-index не auto. Поля абсолютно позиционированных коробок не сворачиваются

с другими полями.
fixed: Элемент выбивается из обычного потока документа, и для элемента в макете страницы не создается пространство. Он позиционируется относительно исходного содержащего блока, установленного viewport, за исключением случаев, когда один из его предков имеет свойство transform, perspective, или filter, установленное на что-то иное, кроме none (см. CSS Transforms Spec), и в этом случае этот предок ведет себя как содержащий блок. (Обратите внимание, что существуют несогласованности браузера с perspective и filter, способствующими содержанию формирования блоков.) Его конечная позиция определяется значениями top, right, bottom и left.; Это значение всегда создает новый контекст наложения. В печатных документах элемент помещается в одно и то же положение на каждой странице.
sticky: Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно его ближайшего прокручивающего предка и содержащего блока (ближайший родительский уровень блока), включая элементы, связанные с таблицей, на основе значений top, right, bottom, и left. Смещение не влияет на положение любых других элементов.; Это значение всегда создает новый контекст наложения. Обратите внимание, что липкий элемент «прилипает» к его ближайшему предшественнику, имеющему «механизм прокрутки» (созданный при overflow равном hidden, scroll, auto или overlay), даже если тот не является ближайшим фактически прокручивающим предком. Это эффективно препятствует любому «липкому» поведению (см. Github issue on W3C CSSWG).

static | relative | absolute | sticky | fixed

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

<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}

Элементы, расположенные относительно друг друга, остаются в нормальном потоке документа. В противоположность этому, элемент с абсолютным позиционированием, выбивается из потока; таким образом, другие элементы располагаются без учёта абсолютных. Абсолютно позиционируемый элемент располагается относительно его ближайшего предка (который не является static). Если такого предка не существует, то абсолютный элемент позиционируется относительно ICB (начальный содержащий блок — см. также определение W3C), который содержит блок корневого элемента документа.

Простой пример:

<h2>Абсолютное позиционирование</h2>
<p>Я базовый элемент уровня блока. Мои соседи сидят на новых строках ниже меня.</p>
<p>По умолчанию моя ширина 100% ширины родителя и я достиг такого же высокого уровня, как и весь дочерний контент. Наша общая ширина и высота - это наш контент+заполнение+ширина/высота границы.</p>
<p>Мы отделены нашей маржой. Из-за развала края мы отделены шириной одного из наших полей, а не обоих.</p>
<p>встроенные элементы <span>как этот</span> и <span>вот этот</span> будут сидеть в одной строке друг с другом и соседними текстовыми узлами, если в ней есть место. Переполнение встроенных элементов <span>перейдёт на новую строку, если это возможно, - как содержимое этого текста</span>, или просто перейдёт к новой строке, а если нет, то встанет, как это изображение:<img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>

body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}

Фиксированное позиционирование аналогично абсолютному, за исключением того, что блок, содержащий элемент, является начальным содержащим блоком, установленным в окне просмотра, если только у какого-либо предка не было transform, perspective, или свойства filter, отличное от none (см. CSS Transforms Spec), из-за чего этот предок занимает место элементов, содержащих блок. Это можно использовать для создания «плавающего» элемента, который остается в том же положении независимо от прокрутки. В приведенном ниже примере окно c id="one" фиксируется в 80 пикселях от верхней части страницы и в 10 пикселях слева. Даже после прокрутки оно остаётся в том же месте относительно окна просмотра.

<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim.
Sed velit augue, pretium a sem aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id maximus erat aliquet.
Sed sagittis porta libero sed condimentum. Aliquam finibus lectus nec ante congue rutrum.
Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. </p>
<div>One</div>
</div>

.box {
  background: red;
  width: 100px;
  height: 100px;
  margin: 20px;
  color: white;
}
#one {
  position: fixed;
  top: 80px;
  left: 10px;
}
.outer {
  width: 500px;
  height: 500px;
  overflow: scroll;
  padding-left: 150px;
}

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

#one { position: sticky; top: 10px; }

… позиционирует элемент с id «one» относительно до тех пор, пока видовой экран не будет прокручен таким образом, чтобы элемент был меньше 10 пикселей от вершины. Помимо этого порога элемент будет зафиксирован на 10 пикселей сверху.

Общее использование для липкого позиционирования — для заголовков в алфавитном списке. Заголовок «B» появится чуть ниже элементов, начинающихся с «A», пока они не будут прокручиваться за кадром. Вместо того, чтобы скользить за кадром с остальной частью содержимого, заголовок «B» затем останется фиксированным в верхней части окна просмотра, пока все элементы «B» не будут прокручиваться на экране, и в этот момент он будет закрыт «C», заголовок и т. д.

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

<div>
  <dl>
    <dt>A</dt>
    <dd>Andrew W.K.</dd>
    <dd>Apparat</dd>
    <dd>Arcade Fire</dd>
    <dd>At The Drive-In</dd>
    <dd>Aziz Ansari</dd>
  </dl>
  <dl>
    <dt>C</dt>
    <dd>Chromeo</dd>
    <dd>Common</dd>
    <dd>Converge</dd>
    <dd>Crystal Castles</dd>
    <dd>Cursive</dd>
  </dl>
  <dl>
    <dt>E</dt>
    <dd>Explosions In The Sky</dd>
  </dl>
  <dl>
    <dt>T</dt>
    <dd>Ted Leo & The Pharmacists</dd>
    <dd>T-Pain</dd>
    <dd>Thrice</dd>
    <dd>TV On The Radio</dd>
    <dd>Two Gallants</dd>
  </dl>
</div>

* {
  box-sizing: border-box;
}

dl {
  margin: 0;
  padding: 24px 0 0 0;
}

dt {
  background: #B8C1C8;
  border-bottom: 1px solid #989EA4;
  border-top: 1px solid #717D85;
  color: #FFF;
  font: bold 18px/21px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}

dd {
  font: bold 20px/45px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0 0 0 12px;
  white-space: nowrap;
}

dd + dd {
  border-top: 1px solid #CCC;
}

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

Элементы прокрутки, содержащие fixed или sticky контент, могут вызвать проблемы с производительностью и доступностью. Когда пользователь прокручивает страницу, браузер должен перерисовать sticky или fixed контент в новом месте. В зависимости от содержимого, которое необходимо перерисовать, производительности браузера и скорости обработки устройства, браузер может не справиться с перерисовкой со скоростью 60 кадров в секунду, что вызывает проблемы с доступностью для людей с чувствительностью и раздражением для всех. Одним из решений является добавление will-change: transform к позиционированным элементам для визуализации элемента на его собственном уровне, повышения скорости перерисовки и, следовательно, повышения производительности и доступности.

The compatibility table on this page is generated from structured data. If you’d like to contribute to the data, please check outand send us a pull request.
Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с https://github.com/mdn/browser-compat-data и отправьте нам запрос на перенос. Update compatibility data on GitHub

	Компьютеры						Мобильные
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome для Android	Firefox для Android	Opera для Android	Safari on iOS	Samsung Internet
`position`	Chrome Полная поддержка 1	Edge Полная поддержка 12	Firefox Полная поддержка 1 Полная поддержка 1 Замечания Before Firefox 57, absolute positioning did not work correctly when applied to elements inside tables that have `border-collapse` applied to them (bug 1379306). Замечания Before Firefox 30, absolute positioning of table rows and row groups was not supported (bug 63895).	IE Полная поддержка 4	Opera Полная поддержка 4	Safari Полная поддержка 1	WebView Android Полная поддержка ≤37	Chrome Android Полная поддержка 18	Firefox Android Полная поддержка 4 Полная поддержка 4 Замечания Before Firefox 57, absolute positioning did not work correctly when applied to elements inside tables that have `border-collapse` applied to them (bug 1379306). Замечания Before Firefox 30, absolute positioning of table rows and row groups was not supported (bug 63895).	Opera Android Полная поддержка 14	Safari iOS Полная поддержка 1	Samsung Internet Android Полная поддержка 1.0
Absolutely-positioned flex children	Chrome Полная поддержка 52	Edge Полная поддержка 12	Firefox Полная поддержка 52	IE Полная поддержка 10	Opera Полная поддержка 39	Safari Полная поддержка 11	WebView Android Полная поддержка 52	Chrome Android Полная поддержка 52	Firefox Android Полная поддержка 52	Opera Android Полная поддержка 41	Safari iOS Полная поддержка 11	Samsung Internet Android Полная поддержка 6.0
`fixed`	Chrome Полная поддержка 1	Edge Полная поддержка 12	Firefox Полная поддержка 1 Полная поддержка 1 Замечания Before Firefox 44, `position: fixed` didn’t create a stacking context in most cases. Firefox and the specification have been modified to mimic Chrome and Safari’s long-time behavior.	IE Полная поддержка 7 Полная поддержка 7 Замечания In Internet Explorer, fixed positioning doesn’t work if the document is in quirks mode.	Opera Полная поддержка 4	Safari Полная поддержка 1	WebView Android Полная поддержка ≤37	Chrome Android Полная поддержка 18	Firefox Android Полная поддержка 4 Полная поддержка 4 Замечания Before Firefox 44, `position: fixed` didn’t create a stacking context in most cases. Firefox and the specification have been modified to mimic Chrome and Safari’s long-time behavior.	Opera Android Полная поддержка 14	Safari iOS Полная поддержка 1	Samsung Internet Android Полная поддержка 1.0
Table elements as `sticky` positioning containers	Chrome Полная поддержка 56	Edge Полная поддержка 16	Firefox Полная поддержка 59	IE Нет поддержки Нет	Opera Полная поддержка 43	Safari Полная поддержка 8	WebView Android Полная поддержка 56	Chrome Android Полная поддержка 56	Firefox Android Полная поддержка 59	Opera Android Полная поддержка 43	Safari iOS Полная поддержка 8	Samsung Internet Android Полная поддержка 6.0
`sticky`	Chrome Полная поддержка 56	Edge Полная поддержка 16	Firefox Полная поддержка 32 Полная поддержка 32 Нет поддержки 26 — 48 Отключено From version 26 until version 48 (exclusive): this feature is behind the `layout.css.sticky.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE Нет поддержки Нет	Opera Полная поддержка 43	Safari Полная поддержка 6.1 Полная поддержка 6.1 С префиксом Требует вендорный префикс: -webkit-	WebView Android Полная поддержка 56	Chrome Android Полная поддержка 56	Firefox Android Полная поддержка 32 Полная поддержка 32 Нет поддержки 26 — 48 Отключено From version 26 until version 48 (exclusive): this feature is behind the `layout.css.sticky.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android Полная поддержка 43	Safari iOS Полная поддержка 6.1 Полная поддержка 6.1 С префиксом Требует вендорный префикс: -webkit-	Samsung Internet Android Полная поддержка 6.0

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

Значение по умолчанию	static
Наследуется	Нет
Применяется	Ко всем элементам
Анимируется	Нет

position: absolute | fixed | relative | static | sticky

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

absolute: Абсолютное позиционирование. Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задаётся свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчёт координат ведётся от края окна браузера. Если у родителя значение position задано как relative, то отсчёт координат ведётся от края родительского элемента.
fixed: Фиксированное позиционирование. По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.
relative: Относительное позиционирование. Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.
static: Статичное позиционирование. Элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к каким-либо результатам.
sticky: Это сочетание относительного и фиксированного позиционирования. Элемент рассматривается как позиционированный относительно, пока он не пересекает определённый порог, после чего рассматривается как фиксированный. Обычно применяется для фиксации заголовка на одном месте, пока содержимое, к которому относится заголовок, прокручивается на странице.

static, relative, absolute

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>position</title> <style> .layer1 { position: relative; /* Относительное позиционирование */ background: #f0f0f0; /* Цвет фона */ height: 200px; /* Высота блока */ } .layer2 { position: absolute; /* Абсолютное позиционирование */ bottom: 15px; /* Положение от нижнего края */ right: 15px; /* Положение от правого края */ line-height: 1px; } </style> </head> <body> <div> <div> <img src=»image/girl.jpg» alt=»Девочка»> </div> </div> </body> </html>
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства position
Объектная модель
Объект.style.position
Примечание
Браузер Safari поддерживает значение -webkit-sticky.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
static, relative, absolute 4 12 1 4 1 1
fixed 7 12 1 4 1 1
sticky 16 56 42 6.1 32
static, relative, absolute 1 1 6 1
fixed 1 1 6 1
sticky 32 6.1
Браузеры
В таблице браузеров применяются следующие обозначения.
— свойство полностью поддерживается браузером со всеми допустимыми значениями;
— свойство браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 29.08.2017
Редакторы: Влад Мержевич
Свойство position | CSS справочник
CSS свойства
Определение и применение
CSS свойство position указывает какой тип позиционирования используется для элемента (статический, относительный, абсолютный или фиксированный).
Совместно со свойством position используются такие CSS свойства как top, right, bottom и left, они позволяют произвести смещение позиционированного элемента относительно определенного края. Ниже в примере рассмотрены возможные типы позиционирования элемента:
position: relative (элемент с относительным позиционированием). При использовании свойства left позиционированный элемент смещается относительно его текущей позиции (отрицательное значение смещает элемент влево, положительное значение вправо). На примере left: 200px;
position: absolute (элемент с абсолютным позиционированием). При использовании свойства left позиционированный элемент смещается относительно левого края его предка (отрицательное значение смещает элемент влево, положительное значение вправо), при этом предок должен иметь значение position отличное от установленного по умолчанию — static, иначе отсчёт будет вестись относительно левого края окна браузера (как при значении position fixed). На примере left: 40px.
position: fixed (элемент с фиксированным позиционированием). При использовании свойства left позиционированный элемент смещается относительно левого края окна браузера (отрицательное значение смещает элемент влево, положительное значение вправо). На примере left: 40px.
position: static (элемент со статическим позиционированием — является значением по умолчанию). Значение свойства left не повлияет на позиционирование элемента.
Более подробную информацию о позиционировании элементов вы можете получить в учебнике CSS в статье «Позиционирование элементов в CSS».
Поддержка браузерами
CSS синтаксис:
position:"static | absolute | fixed | relative | initial | inherit" ;
JavaScript синтаксис:
object.style.position = "absolute"
Значения свойства
Значение Описание
absolute Абсолютное позиционирование. При смещении элемент сдвигается относительно заданного края его предка, при этом предок должен иметь значение position отличное от установленного по умолчанию — static, иначе отсчёт будет вестись относительно, указанного края окна браузера (как при position: fixed).
fixed Фиксированное позиционирование. При смещении элемент сдвигается относительно заданного края окна браузера.
static Статическое позиционирование. Элементы отображаются в том порядке, как они указаны в потоке HTML документа. Это значение по умолчанию.
relative Относительное позиционирование. При смещении элемент сдвигается относительно его текущей позиции.
initial Устанавливает свойство в значение по умолчанию.
inherit Указывает, что значение наследуется от родительского элемента.
Версия CSS
CSS2
Наследуется
Нет.
Анимируемое
Нет.
Пример использования
<!DOCTYPE html> <html> <head> <title>Пример использования свойства position</title> <style> body { background-color:khaki; /* задаём задний фон цвета хаки */ height:2000px; /* устанавливаем высоту элемента */ } h2 { position:static; /* элемент со статическим позиционированием */ } .relative { position:relative; /* элемент с относительным позиционированием */ left : 200px; * задаём смещение элемента влево относительно его текущей позиции */ width 200px; /* задаём ширину блока */ height: 250px; /* задаём высоту блока */ border 5px solid; /* задаём стиль для границ сплошной и ширину 5px */ background-color:orange; /* задаём задний фон оранжевого цвета */ } .absolute { position:absolute; /* элемент с абсолютным позиционированием */ left : 40px; * задаём смещение элемента влево относительно левого края его предка */ width 150px; /* задаём ширину блока */ height:
Свойство position | CSS
Свойство position используется, чтобы задать положение элемента на странице. Все элементы по умолчанию расположены на странице статично. Статическое расположение определяет позицию элемента в последовательном порядке элементов на странице. Это позиция по умолчанию для каждого элемента.
Если элемент указан как позиционируемый, то его положение было изменено со статического на одно из четырех возможных значений свойства background position CSS: relative, absolute, fixed, sticky.
В дополнение к пяти упомянутым значениям, в CSS3 были добавлены еще два новых значения свойства: page и center.
После того как элемент был позиционирован (было присвоено нестатическое значение), его положение на странице определяется с помощью свойств смещения: top, right, bottom, и left. Свойства смещения работают только для позиционируемых элементов, поэтому их применение к статичным элементам не работает. Эти свойства используются, чтобы задать смещение элемента относительно его контекста позиционирования.
Он является системой координат, которую вы используете, чтобы определить положение элемента с помощью свойств смещения.
Относительно позиционируемый элемент (position: relative) устанавливает положение своих абсолютно позиционируемых потомков, а также задает свое положение. Это значит, что вы можете сдвинуть элемент от его первоначальной позиции с помощью свойств смещения. Точкой отсчета для элемента в этом случае является его первоначальное положение на странице относительно левого верхнего угла:

Относительно позиционируемый элемент сдвигается от своей первоначальной позиции после применения к нему свойства position: relative. Пунктирный квадрат отображает первоначальное положение элемента на странице. Элемент сдвинут на 35 пикселей вниз и 35 пикселей вправо относительно исходной позиции.

Относительно позиционируемый элемент, смещенный со своего первоначального положения, сохраняет свой порядковый номер в «стеке» остальных частей дизайна, и любое новое положение, которое он принимает, не влияет на размещение контента на странице. Он может легко перекрывать другие элементы на странице. На рисунке выше показано, как сохраняется первоначальное положение элемента после его перемещения.
Когда элемент позиционируется абсолютно (position: absolute), он может быть размещен относительно другого элемента на странице. Элемент, относительно которого он размещается, должен иметь уже заданную позицию.
С помощью CSS position relative абсолютно позиционируемый элемент располагается по отношению к относительно позиционируемому элементу (position: relative). Началом системы координат является левый верхний угол относительно позиционируемого элемента.
Например, следующее изображение демонстрирует элемент, который размещен статически. Розовый квадрат при этом смещен влево при помощи свойства float так, чтобы текст обтекал его:

Статически позиционируемый элемент

Серый контур показывает границу контейнера розового квадрата. Для контейнера было установлено position: relative, поэтому он задает контекст позиционирования для розового квадрата. После того как розовый квадрат позиционирован абсолютно, он удаляется из потока страницы и текст распределяется так, как будто квадрата никогда и не было в потоке:

Розовый квадрат позиционируется абсолютно относительно своего родителя (серые границы). Он располагается: top: 30px, right: 40px.

Если элемент позиционируется абсолютно и ни для одного из его родителей не установлено значение свойства position, то он размещается относительно элемента.
Элемент с CSS position fixed располагается относительно области просмотра. Он обладает тем же поведением, что и абсолютно позиционируемые элементы: удаляется из потока страницы и больше не влияет на разметку. Но вместо того чтобы позиционироваться относительно какого-либо элемента на странице, он располагается относительно области просмотра и не зависит от прокрутки: он зафиксирован в области просмотра в позиции, заданной с помощью свойств смещения.
Фиксированное позиционирование обычно используется, чтобы удерживать определенные элементы все время на виду. Например, фиксированный заголовок, навигация.
Значение свойства sticky, center и page на данный момент все еще являются экспериментальными со слабой поддержкой.
Элемент с «прилипающим» позиционированием (position: sticky) рассматривается как гибрид относительного и фиксированного элементов. Например:
.element { position: sticky; top: 70px; }
Заданный элемент будет вести себя так, как если бы он имел position: relative, пока область просмотра не достигнет во время прокрутки точки в 10 пикселей от верхней границы области просмотра. Если элемент находится выше, то он зафиксируется в 70 пикселях от верхней части, пока прокрутка браузера не достигнет порогового значения.
«Прилипающий» эффект обычно создается с помощью JavaScript, и как только значение sticky станет поддерживаться всеми браузерами, то его можно будет воспроизвести, используя CSS.
Стоит отметить один момент: вам нужно указать «порог» для «прилипающего» элемента с помощью одного из свойств смещения, в противном случае элемент не будет работать, и будет вести себя в точности, так как если бы он был позиционирован относительно.
Значение center используется для центрирования элемента внутри другого элемента. Центрированный элемент будет размещен в центре контейнера и удален из «стека» элементов страницы. Можно воспользоваться свойствами смещения, чтобы сдвинуть элемент с его центрированной позиции.
Поведение значения page свойства position до сих пор неясно. Оно связано с постраничным выводом и контейнерами, созданными с помощью CSS Regions.
Элементы с CSS position absolute, использующие свойства смещения, могут иметь отступы (margins),которые размещаются внутри контекста позиционирования.
Абсолютно позиционируемый элемент займет столько горизонтального и вертикального пространства, сколько потребуется для его контента. Его можно растянуть, и он заполнит ширину своего контейнера. Для этого нужно оставить его ширину (width) неопределенной и расположить его левую границу на левой границе родителя, а правую границу – на правой границе родителя, используя свойства смещения right и left:
position: absolute; left: 0; right: 0;
Аналогично абсолютно позиционируемый элемент может быть растянут вертикально с помощью свойств top и bottom:
position: relative; top: 0; bottom: 0;
В случае, когда высота и ширина элемента при CSS абсолютном позиционировании определены, то:
если оба свойства top и bottom определены, то top имеет большую силу;
если right и left определены, left выигрывает;
если свойство direction имеет значение rtl (например, арабский), то «побеждает» right.
Фиксированные элементы обычно позиционируются относительно области просмотра. Кроме случаев, когда вы применяете свойство transform к одному из перекрывающих родителей. В таком случае трансформированный элемент создает внешний блок для всех своих позиционированных потомков, даже для тех, которые имеют фиксированное положение.
Синтаксис:
position: static | relative | absolute | sticky | center | page | fixed
Начальное значение: static.
Применимо: все элементы.
Использование в анимациях: нет.
Алгоритм CSS позиционирования по умолчанию. Блок располагается в соответствии с нормальным потоком. Свойства top, right, bottom и left не применяются.
Позиция блока рассчитывается относительно его исходного положения. Во всех случаях, включая табличные элементы, он не влияет на положение любых следующих элементов.
Эффект применения свойства position: relative к табличным элементам:
table-row-group, table-header-group, table-footer-group и table-row смещаются относительно своей нормальной позиции в пределах таблицы. Если ячейки таблицы объединяют несколько строк, то смещаются только ячейки относительно позиционированной строки;
table-column-group, table-column не смещают соответствующий столбец, когда применено свойство position: relative;
table-caption и table-cell смещаются относительно нормальной позиции внутри таблицы. Если ячейка таблицы занимает несколько столбцов или строк, то смещается вся составная ячейка.
Положение блока задается свойствами top, right, bottom и left, которые описывают смещение относительно внешнего блока. Абсолютно позиционируемые блоки изымаются из нормального потока. Это означает, что они не имеют никакого влияния на разметку последующих элементов. Абсолютно позиционируемые блоки могут иметь отступы, если эти отступы не пересекаются с какими-либо другими отступами
Позиция блока рассчитывается согласно нормальному потоку (как position: relative). Блок смещается и фиксируется относительно области просмотра и внешнего блока, и во всех случаях, включая табличные элементы, он не влияет на положение последующих элементов. Когда элемент позиционирован «прилипанием», положение следующего элемента задается без учета смещения. Эффект от применения position: sticky к табличным элементам такой же, как и от position: relative.
CSS позиционирование блоков определяется свойствами top, right, bottom и left. Блок центрируется вертикально и горизонтально внутри контейнера относительно центрального положения блока в содержащем его контейнере. Центрально позиционированные блоки изымаются из нормального потока. Это означает, что они не влияют на разметку последующих элементов (как и absolute). Центрально позиционированные элементы могут иметь отступы, если они не пересекаются с другими.
Позиция блока рассчитывается в соответствии с абсолютной моделью. В случае размещения внутри региона внешним блоком всегда является начальный контейнер.
Иначе содержащий блок определяется согласно абсолютной модели.
Как и в абсолютной модели, отступы блока не перекликаются с какими-либо другими отступами.
.parent { position: relative; } .child { position: absolute; top: 10px; left: 30px; } /* Заголовок остается на виду при прокручивании области просмотра */ header { position: fixed; top: 0; left: 0; right: 0; } /* Этот элемент становится зафиксированным, как только его положение относительно вершины области просмотра станет меньше или равно 100 пикселям */ .sticky { position: sticky; top: 100px; }
Следующее демо содержит демонстрацию работы четырех основных значений позиционирования: relative, absolute, fixed и даже sticky:
Посмотреть демо
Свойство position работает во всех основных браузерах: Chrome, Firefox, Safari, Opera, Internet Explorer, а также на Android и iOS.
Но поддержка значений fixed и sticky различается среди браузеров. Вот таблицы совместимости для этих двух значений:
<iframe src="http://caniuse.com/css-fixed/embed/" align="left" scrolling="no"> </iframe>
В Internet Explorer фиксированное позиционирование в CSS не работает, если документ находится в режиме совместимости:
<iframe src="http://caniuse.com/css-sticky/embed/" align="left" scrolling="no"> </iframe>
«Прилипающее» позиционирование будет работать в Firefox 26 (Gecko 26) только если для параметра layout.css.sticky.enabled в about:config задано значение true.
Значения center и page в настоящее время не поддерживаются ни одним браузером.
В Gecko, если есть элемент <table> внутри позиционированного контейнера, такого как <div>, элемент со свойством position: absolute, находящийся внутри таблицы, будет позиционирован относительно внешнего <div>, а не таблицы, которая является ближайшим позиционированным родителем. Это ошибка, и она не была исправлена.
Элемент со свойством position: absolute внутри позиционированного элемента <div> с display: table-cell будет позиционирован относительного внешнего блокового элемента вместо содержащего <div>, что аналогично поведению, описанному выше.

Данная публикация представляет собой перевод статьи «Position» , подготовленной дружной командой проекта Интернет-технологии.ру
position | CSS справочник
Поддержка браузерами

12.0+ 7.0+ 1.0+ 1.0+ 4.0+ 1.0+

Описание
CSS свойство position указывает тип позиционирования элемента на веб странице. Позиционирование определяет относительно чего, при смещении, будет позиционироваться элемент: относительно окна браузера, других элементов или текущего местоположения на веб-странице.
Вместе со свойством position используются свойства top, right, bottom и left, которые управляют смещением позиционированного элемента.
Если элементу с абсолютным или фиксированным позиционированием установить свойства top, left, right, bottom со значением 0, то используя свойство margin со значением auto, элемент можно центрировать и по вертикали и по горизонтали.

Значение по умолчанию: static

Применяется: ко всем элементам

Анимируется: нет

Наследуется: нет

Версия: CSS2

Синтаксис JavaScript: object.style.position=»absolute»

Синтаксис
position: static | absolute | fixed | relative | inherit;
Значения свойства

Значение Описание

static Элемент находится в нормальном потоке и отображается на веб-странице в том месте, в котором он расположен в коде HTML-документа. Применение свойств top, left, right и bottom к элементу со статическим позиционированием не даст никакого эффекта.

absolute Элемент с абсолютным позиционированием удаляется из нормального потока, другие элементы, расположенные в коде после него, смещаются на веб-странице на его место. Если для элемента не задано смещение, он остаётся на своём месте. Если смещение задано, элемент позиционируется относительно его первого позиционированного (не static) элемента предка. Если у элемента нет предка с позиционированием (relative, absolute или fixed), тогда он будет смещаться относительно окна браузера. При прокрутке содержимого в окне браузера, элемент прокручивается с остальным содержимым веб-страницы.

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

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

inherit: Указывает, что значение наследуется от родительского элемента.

Пример
div#myDIV {
width: 100px;
height: 100px;
background: red;
left: 10px;
top: 100px;
position: static;
}
position в CSS | Учебные курсы
Свойство position — это универсальное и мощное свойство. Оно позволяет установить или изменить положение элемента и содержит четыре возможных значения:
static (значение по умолчанию)
relative
absolute
fixed
Часто используется наряду с четырьмя свойствами координат:
static
Это значение position по умолчанию: статичные элементы просто следуют естественному потоку. Любые значения left, right, top или bottom не оказывают влияния.
relative
Когда position установлено относительно, элемент может перемещаться относительно его текущей позиции.
HTML
<p>Едва мы спрятали лодку, Джа увлёк меня в джунгли, и вскоре мы вышли на узкую, хорошо утоптанную тропу.</p> <p>Я ринулся вверх, пытаясь в последнем усилии дотянуться до руки Джа, но ситик с такой силой рванул копьё на себя, что оно вырвалось из рук мезопа, едва не сорвавшегося со скалы, а я, всё ещё цепляясь за древко, полетел вниз, прямо в раскрытую пасть зверюги.</p> <p>Он уже перешёл на бег, замахиваясь на ходу тяжёлым копьём.</p>
CSS
p { border: 1px solid blue; }
Давайте переместим второй абзац:
.second { position: relative; border-color: red; left: 20px; top: 10px; }
Красный абзац переместился на 20px слева направо и на 10px сверху вниз относительно его естественного положения, где он полагался быть.
Обратите внимание, что синие абзацы не сдвинулись вообще. При использовании относительного позиционирования, красный абзац может свободно перемещаться, не нарушая макет. Единственное, что сдвигается со своего места, так это сам элемент. Все остальные элементы не знают, что элемент переместился.
absolute
Когда position устанавливается абсолютно, элемент может перемещаться относительно первого позиционированного предка.
Позиционированного? Что такое позиционированный элемент?
Позиционированный элемент — это тот, у которого значение position установлено как relative, absolute или fixed. Таким образом, если положение не задано статичным, то элемент позиционированный.
Характеристикой позиционированного элемента является то, что он может выступать в качестве точки отсчёта для своих дочерних элементов.
Давайте представим простую иерархию:
HTML
<section> Я позиционирован относительно. <p> Я позиционирован абсолютно! </p> </section>
CSS
section { background: gold; height: 200px; padding: 10px; position: relative; /* Превращает <section> в точку отсчёта для <p> */ } p { background: limegreen; color: white; padding: 10px; position: absolute; /* Делает <p> свободно перемещаемым */ bottom: 10px; /* 10px снизу */ left: 20px; /* 20px слева */ }
Жёлтый раздел имеет высоту 200px, а позиционирование задано как relative, что превращает его в точку отсчёта для всех дочерних элементов.
Зелёный абзац позиционирован как absolute и может свободно перемещаться относительно жёлтого раздела. Установив оба значения left и bottom, мы переместим его в левый нижний угол.
Что произойдёт, если мы одновременно установим left и right?
Если ширина не задана, применение left: 0 и right: 0 растягивает элемент на всю ширину. Это эквивалент установки left: 0 и width: 100%.
Если ширина установлена, то значение right отбрасывается.
fixed
Когда position задано как fixed, оно действует как абсолютное: вы можете установить координаты слева/справа и сверху/снизу.
Единственное отличие состоит в том, что точкой отсчёта является окно просмотра. Это означает, что фиксированный элемент не перемещается со страницей, он фиксируется на экране.
Положение CSS: относительное и абсолютное положение
Свойство CSS position определяет, как следует из названия, расположение элемента на веб-странице.
Если вам интересно узнать о свойствах шрифта, могут быть интересны статьи об относительном размере шрифта и столбцах CSS.
Итак, существует несколько типов позиционирования: статическое, относительное, абсолютное, фиксированное, липкое, начальное и наследование . Прежде всего, давайте объясним, что означают все эти типы.
Статический — это значение по умолчанию, все элементы в порядке, как они отображаются в документе.
Relative — элемент позиционируется относительно своего нормального положения.
Absolute — элемент позиционируется абсолютно относительно своего первого расположенного родителя.
Исправлено — элемент позиционируется относительно окна браузера.
Sticky — элемент располагается в зависимости от положения прокрутки пользователя.
Теперь, когда мы объяснили основы, мы поговорим подробнее о двух наиболее часто используемых значениях положения — относительных и абсолютных .
Что такое относительное позиционирование?
При установке позиции относительно элемента без добавления каких-либо других атрибутов позиционирования (сверху, снизу, справа, слева) ничего не произойдет . Когда вы добавляете дополнительную позицию, например left: 20px, элемент перемещается на 20px вправо от своего обычного положения.Здесь вы можете видеть, что этот элемент относится к самому себе . Когда элемент перемещается, никакие другие элементы макета не будут затронуты.
При установке позиции следует иметь в виду одну вещь — относительно элемента ограничивается область действия абсолютно позиционированных дочерних элементов. Это означает, что любой элемент, являющийся дочерним элементом этого элемента, может быть абсолютно позиционирован внутри этого блока.
После этого краткого объяснения нам нужно подкрепить его примером.
В этом примере вы увидите, как перемещается относительно позиционированный элемент при изменении его атрибутов. Первый элемент перемещается на слева и наверх из своего нормального положения, в то время как второй элемент остается на том же месте , потому что ни один из дополнительных атрибутов позиционирования не был изменен.
HTML
Первый элемент Второй элемент
CSS
#first_element { положение: относительное; слева: 30 пикселей; верх: 70 пикселей; ширина: 500 пикселей; цвет фона: #fafafa; граница: solid 3px # ff7347; размер шрифта: 24 пикселя; выравнивание текста: центр; } #second_element { положение: относительное; ширина: 500 пикселей; цвет фона: #fafafa; граница: solid 3px # ff7347; размер шрифта: 24 пикселя; выравнивание текста: центр; }

Что такое абсолютное позиционирование?
Этот тип позиционирования позволяет разместить элемент именно там, где вы хотите .
Позиционирование выполняется относительно первого относительно (или абсолютно) позиционированного родительского элемента . В случае, когда нет позиционированного родительского элемента, он будет позиционирован как связанный непосредственно с HTML-элементом (самой страницей) .
При использовании абсолютного позиционирования важно помнить о том, что не используется чрезмерно , иначе это может привести к кошмару при обслуживании.
Следующее, что снова нужно показать, это показать пример.
В этом примере для родительского элемента задана позиция относительно . Теперь, когда вы устанавливаете позицию дочернего элемента на absolute , , любое дополнительное позиционирование будет выполняться относительно родительского элемента . Дочерний элемент перемещается относительно верха родительского элемента на 100 пикселей и справа от родительского элемента на 40 пикселей.
HTML

CSS
#parent { положение: относительное; ширина: 500 пикселей; высота: 400 пикселей; цвет фона: #fafafa; граница: сплошная 3px # 9e70ba; размер шрифта: 24 пикселя; выравнивание текста: центр; } #child { позиция: абсолютная; вправо: 40 пикселей; верх: 100 пикселей; ширина: 200 пикселей; высота: 200 пикселей; цвет фона: #fafafa; граница: сплошная 3px # 78e382; размер шрифта: 24 пикселя; выравнивание текста: центр; }

На этих примерах вы увидели различия между абсолютно и относительно позиционированными элементами.
Надеемся, эта статья прояснила некоторые сомнения и поможет в любых будущих проектах.
Ознакомьтесь с другими подробными статьями, связанными со свойствами CSS, такими как эта: CSS Positions, SASS и LESS Nesting.
,
позиций | CSS-уловки
Свойство position может помочь вам управлять расположением элемента, например:
.element { положение: относительное; верх: 20 пикселей; }
Относительно исходного положения элемент выше теперь будет смещен вниз на 20 пикселей. Если бы мы анимировали эти свойства, мы могли бы увидеть, какой контроль это дает нам (хотя это не очень хорошая идея по соображениям производительности):
См. Pen fcdf9b19b6bed8da6af791d7433116b0 от CSS-Tricks (@ css-tricks) на CodePen.
relative — это только одно из шести значений свойства position . Вот остальные:
Значения
static : каждый элемент по умолчанию имеет статическое положение, поэтому элемент будет придерживаться обычного потока страниц. Таким образом, если установлен левый / правый / верхний / нижний / z-индекс, то это не повлияет на этот элемент.
относительный : исходное положение элемента остается в потоке документа, как и значение static .Но теперь left / right / top / bottom / z-index будет работать. Позиционные свойства «подталкивают» элемент из исходного положения в этом направлении.
absolute : элемент удаляется из потока документа, и другие элементы будут вести себя так, как будто его даже нет, в то время как все остальные позиционные свойства будут работать с ним.
исправлено : элемент удаляется из потока документа, как абсолютно позиционированные элементы. Фактически, они ведут себя почти одинаково, только элементы с фиксированным позиционированием всегда относятся к документу, а не к конкретному родительскому элементу, и на них не влияет прокрутка.
липкий (экспериментальный): элемент обрабатывается как относительное значение до тех пор, пока положение прокрутки области просмотра не достигнет заданного порогового значения, после чего элемент займет фиксированное значение позиции
.
Как использовать свойство position в CSS для выравнивания элементов
Позиционировать элементы с помощью CSS в веб-разработке не так просто, как кажется. Все может быстро усложняться по мере того, как ваш проект становится больше, и без хорошего понимания того, как CSS работает с выравниванием HTML-элементов, вы не сможете исправить свои проблемы с выравниванием.
Существуют разные способы позиционирования элементов с помощью чистого CSS. Используя CSS float, display и position свойства являются наиболее распространенными методами.
В этой статье я объясню один из самых запутанных способов выравнивания элементов с помощью чистого CSS: свойство position. У меня также есть еще одно руководство по CSS Display Property.
Если хотите, вы можете посмотреть видеоверсию CSS Positioning Tutorial:

Давайте начнем …
CSS Position & Helper Properties
Итак, есть 5 основных значений свойства Position :
положение: статическое | родственник | абсолютный | фиксированный | липкий
и дополнительные свойства для установки координат элемента (я называю их «вспомогательными свойствами» ):
top | право | внизу | left И z-index
Важное примечание : Вспомогательные свойства не работают без объявленной позиции или с position: static.
Что это за z-index?
У нас есть высота и ширина (x, y) как 2 измерения. Z — это 3-е измерение. Элемент на веб-странице появляется перед другими элементами по мере увеличения его значения z-index .
Z-index не работает с позицией : статической или без заявленной позиции.
Элементы упорядочены сзади вперед, так как их z-index увеличивается
Вы можете посмотреть видео на моем канале, чтобы узнать, как использовать z-index более подробно:

Теперь давайте продолжим с позиция свойство значения …
1. Статическое положение
: статическое — это значение по умолчанию . Независимо от того, объявляем мы это или нет, элементы размещаются на веб-странице в обычном порядке. Приведем пример:
Сначала мы определяем нашу структуру HTML:

Затем мы создаем 2 блока и определяем их ширину, высоту и положение:
.box-orange {// без объявления позиции фон: оранжевый; высота: 100 пикселей; ширина: 100 пикселей; } ,box-blue { фон: светло-голубой; высота: 100 пикселей; ширина: 100 пикселей; положение: статическое; // Объявлен статическим }
тот же результат с & без position: static
Как мы видим на рисунке, определение position: static или not не имеет никакого значения. Ящики располагаются в соответствии с нормальным документооборотом .
2. Относительное положение
: относительное : Новое положение элемента относительно его нормального положения.
Начиная с позиции : относительный и для всех нестатических значений позиции , мы можем изменить позицию элемента по умолчанию , используя вспомогательное свойство s, которое I уже упоминалось выше.
Давайте переместим оранжевую рамку рядом с синей.
.box-orange { положение: относительное; // Теперь мы готовы переместить элемент фон: оранжевый; ширина: 100 пикселей; высота: 100 пикселей; верх: 100 пикселей; // 100 пикселей сверху относительно его старой позиции слева: 100 пикселей; // 100 пикселей слева }
Оранжевая коробка .
единиц CSS
Единицы CSS
CSS имеет несколько различных единиц для выражения длины.
Многие свойства CSS принимают значения «длины», например , ширина , поле , отступ , размер шрифта и т. Д.
Длина — это число, за которым следует единица длины, например 10 пикселей, 2em и т. Д.
Между числом и единицей не может быть пробела. Однако, если значение 0, блок можно не указывать.
Для некоторых свойств CSS разрешена отрицательная длина.
Есть два типа единиц длины: абсолютные и относительные.
Абсолютные длины
Абсолютные единицы длины фиксированы, и длина, выраженная в любой из них, будет отображаться как точно такой размер.
Единицы абсолютной длины не рекомендуется использовать на экране, потому что размеры экрана сильно различаются. Однако их можно использовать, если известно средство вывода, например что касается макета печати.
Блок Описание
см см Попытайся
мм миллиметров Попытайся
в дюймов (1 дюйм = 96 пикселей = 2,54 см) Попытайся
пикселей * пикселей (1 пиксель = 1/96 часть 1 дюйма) Попытайся
пт точек (1pt = 1/72 от 1in) Попытайся
шт пик (1 шт. = 12 пт) Попытайся
* Пикселей (пикселей) относительно устройства просмотра.Для устройств с низким разрешением 1 пиксель — это один пиксель (точка) экрана устройства. Для принтеров и высокого разрешения экраны 1px подразумевает несколько пикселей устройства.
Относительная длина
Единицы относительной длины определяют длину относительно другого свойства длины. Относительные единицы длины лучше масштабируются между различными средами визуализации.
Блок Описание
см Относительно размера шрифта элемента (2em означает 2-кратный размер текущего шрифта) Попробуйте
из Относительно высоты по оси x текущего шрифта (используется редко) Попробуйте
шасси Относительно ширины «0» (нуля) Попробуйте
рем Относительно размера шрифта корневого элемента Попробуйте
VW Относительно 1% ширины области просмотра * Попробуйте
vh Относительно 1% высоты области просмотра * Попробуйте
vmin Относительно 1% меньшего размера области просмотра * Попробуйте
vmax Относительно 1% большего размера области просмотра * Попробуйте
% Относительно родительского элемента Попробуйте
Совет: Единицы em и rem идеально подходят для создания идеальных масштабируемый макет!
* Viewport = размер окна браузера.Если область просмотра 50 см широкий, 1vw = 0,5 см.
Поддержка браузера
Числа в таблице указывают первую версию браузера, которая полностью поддерживает единица длины.
Единица длины
em, ex,%, px, cm, mm, in, pt, pc 1,0 3.0 1,0 1,0 3,5
шасси 27,0 9,0 1,0 7,0 20,0
рем 4,0 9,0 3,6 4,1 11,6
vh, vw 20.0 9,0 19,0 6,0 20,0
vmin 20,0 12,0 19,0 6,0 20,0
vmax 26,0 16,0 19,0 7,0 20.0
,
No related posts.

Значение	Описание
absolute	Абсолютное позиционирование. При смещении элемент сдвигается относительно заданного края его предка, при этом предок должен иметь значение position отличное от установленного по умолчанию — static, иначе отсчёт будет вестись относительно, указанного края окна браузера (как при position: fixed).
fixed	Фиксированное позиционирование. При смещении элемент сдвигается относительно заданного края окна браузера.
static	Статическое позиционирование. Элементы отображаются в том порядке, как они указаны в потоке HTML документа. Это значение по умолчанию.
relative	Относительное позиционирование. При смещении элемент сдвигается относительно его текущей позиции.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Указывает, что значение наследуется от родительского элемента.

Значение по умолчанию:	static
Применяется:	ко всем элементам
Анимируется:	нет
Наследуется:	нет
Версия:	CSS2
Синтаксис JavaScript:	object.style.position=»absolute»

Значение	Описание
static	Элемент находится в нормальном потоке и отображается на веб-странице в том месте, в котором он расположен в коде HTML-документа. Применение свойств top, left, right и bottom к элементу со статическим позиционированием не даст никакого эффекта.
absolute	Элемент с абсолютным позиционированием удаляется из нормального потока, другие элементы, расположенные в коде после него, смещаются на веб-странице на его место. Если для элемента не задано смещение, он остаётся на своём месте. Если смещение задано, элемент позиционируется относительно его первого позиционированного (не static) элемента предка. Если у элемента нет предка с позиционированием (relative, absolute или fixed), тогда он будет смещаться относительно окна браузера. При прокрутке содержимого в окне браузера, элемент прокручивается с остальным содержимым веб-страницы.
fixed	Элемент с фиксированным позиционированием удаляется из нормального потока, другие элементы, расположенные в коде после него, смещаются на веб-странице на его место. Если для элемента не задано смещение, он остаётся на своём месте. Если смещение задано, элемент позиционируется относительно окна браузера. При прокрутке содержимого в окне браузера, элемент остаётся на месте, т. е. не прокручивается с остальным содержимым веб-страницы.
relative	Элемент с относительным позиционированием остаётся в нормальном потоке. Если для элемента не задано смещение, он остаётся на своём месте. Если смещение задано, элемент позиционируется относительно его текущей позиции, однако, так как элемент находится в нормальном потоке, на его месте на веб-странице остаётся пустое пространство.
inherit:	Указывает, что значение наследуется от родительского элемента.

Блок	Описание
см	см Попытайся
мм	миллиметров Попытайся
в	дюймов (1 дюйм = 96 пикселей = 2,54 см) Попытайся
пикселей *	пикселей (1 пиксель = 1/96 часть 1 дюйма) Попытайся
пт	точек (1pt = 1/72 от 1in) Попытайся
шт	пик (1 шт. = 12 пт) Попытайся

Блок	Описание
см	Относительно размера шрифта элемента (2em означает 2-кратный размер текущего шрифта)	Попробуйте
из	Относительно высоты по оси x текущего шрифта (используется редко)	Попробуйте
шасси	Относительно ширины «0» (нуля)	Попробуйте
рем	Относительно размера шрифта корневого элемента	Попробуйте
VW	Относительно 1% ширины области просмотра *	Попробуйте
vh	Относительно 1% высоты области просмотра *	Попробуйте
vmin	Относительно 1% меньшего размера области просмотра *	Попробуйте
vmax	Относительно 1% большего размера области просмотра *	Попробуйте
%	Относительно родительского элемента	Попробуйте

Единица длины
em, ex,%, px, cm, mm, in, pt, pc	1,0	3.0	1,0	1,0	3,5
шасси	27,0	9,0	1,0	7,0	20,0
рем	4,0	9,0	3,6	4,1	11,6
vh, vw	20.0	9,0	19,0	6,0	20,0
vmin	20,0	12,0	19,0	6,0	20,0
vmax	26,0	16,0	19,0	7,0	20.0