Тег position в css: Свойство position

Свойство 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» , подготовленной дружной командой проекта Интернет-технологии.ру

телеграм канал. Подпишись, будет полезно!

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

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

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

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

Когда вы устанавливаете положение относительно элемента, без добавления других атрибутов позиционирования (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 свойство position

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

CSS синтаксис

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

Возможные значения

Пример использования

Устанавливаем позиционирование элемента <h3>

h3 {
     position: absolute;
     left: 100px;
     top: 150px;
}

Учебник CSS 3. Статья «Позиционирование элементов в CSS»

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

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

Типы позиционирования элементов

Основное свойство CSS, которое позволяет управлять позиционированием элементов на странице это свойство position, оно сообщает браузеру, какой тип позиционирования используется для элемента (статический — static, относительный — relative, абсолютный – absolute, или фиксированный — fixed).

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

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

Совместно со свойством position используются CSS свойства, которые управляют смещением позиционированного элемента:

• top (смещение позиционированного элемента от верхнего края).
• right (смещение позиционированного элемента от правого края).
• bottom (смещение позиционированного элемента от нижнего края).
• left (смещение позиционированного элемента от левого края).

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

При использовании абсолютного позиционирования (position: absolute) элемент сдвигается (позиционируется) относительно заданного края его предка, при этом предок должен иметь значение position отличное от, установленного по умолчанию — static, иначе отсчёт (смещение) будет вестись относительно, указанного края окна браузера.

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

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Абсолютное позиционирование элементов</title>
<style>
div {
position: absolute; /* абсолютное позиционирование элементов */
width: 100px; /* ширина элемента */
height: 100px; /* высота элемента */
}
.absolute {
top: 3em; /* смещение от вержнего края */
right: 50%; /* смещение от правого края */	
background-color: green; /* цвет заднего фона */
}
.absolute2 {
bottom: 25%; /* смещение от нижнего края */
left: 40%; /* смещение от левого края */
background-color: yellow; /* цвет заднего фона */
</style>
</head>
	<body>
		<div class = "absolute">
			absolute
		</div>
		<div class = "absolute2">
			absolute2
		</div>
	</body>
</html>

И так, что мы сделали в этом примере:

• Разместили два блока <div> шириной и высотой 100 пикселей и указали для них, что они имеют абсолютное позиционирование.
• Для первого блока мы указали, что он смещается от верхнего края окна на 3em, а от правого на 50%.
• Для второго блока мы указали, что он смещается от нижнего края окна на 25%, а от левого на 40%.
• Теперь важный момент, на который вы, скорее всего не обратили внимание. Почему наши элементы позиционируются относительно окна браузера?
  Элементы будут позиционироваться относительно заданного края предка лишь в том случае, если их предок имеет значение свойства position отличное от, установленного по умолчанию — static, иначе смещение будет вестись относительно края окна браузера. Подобные ситуации не раз будут возникать у Вас во время верстки страниц, запомните этот важный момент, мы еще к нему вернемся далее в этой статье учебника.

Результат нашего примера:

Рис. 157 Пример абсолютного позиционирования элементов на странице.

Обратите внимание, что наш второй блок (желтый) наложился на первый, в конце предыдущей статьи учебника «Работа с таблицами в CSS», мы уже сталкивались со свойством z-index, благодаря ему, вы можете управлять видимостью элементов по оси z. Например, если задать для первого (зеленого) блока значение z-index: 1, то уже он будет находиться выше по оси, чем второй (желтый блок) и будет полностью виден. Аналогичного эффекта можно добиться, если указать для желтого блока отрицательное значение свойства z-index.

Как вы заметили, элементы, которые имеют абсолютное позиционирование, отделяются от основного потока страницы, что может приводить к наслоению элементов друг на друга. Еще один нюанс работы с элементами, которые имеют абсолютное позиционирование, это то, что они не могут быть плавающими. Плавающими элементами могут быть только элементы, которые имеют статическое позиционирование (static), то есть то, которое установлено у элемента по умолчанию. Методы работы с плавающими элементами мы с Вами рассматривали в статье учебника «Плавающие элементы в CSS».

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

Следующий тип позиционирования, который мы рассмотрим это относительное позиционирование. Элементы, для которых задано относительное позиционирование (position: relative) смещаются (размещаются) относительно положения в потоке документа, или другими словами относительно его текущей позиции.

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

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Относительное позиционирование элементов</title>
<style>
.static {
height: 50px; /* высота элемента */
background-color: red; /* цвет заднего фона */
}
.relative {
position: relative; /* относительное позиционирование элемента */	
height: 100px; /* высота элемента */
top: 50px; /* смещение от вержнего края */
left: 100px; /* смещение от левого края */	
background-color: green; /* цвет заднего фона */
}
</style>
</head>
	<body>
		<div class = "static">
			static
		</div>
		<div class = "relative">
			relative
		</div>
		<div class = "static">
			static
		</div>
	</body>
</html>

И так, что мы сделали в этом примере:

• Для блоков (элементы <div>), которые имеют статическое позиционирование (по умолчанию) установили высоту 50 пикселей и цвет заднего фона – красный.
• Разместили между блоков элемент с относительным позиционированием (position: relative), установили для него высоту 100 пикселей и цвет заднего фона зеленый. Кроме того указали, что он смещается относительно его текущей позиции от верхнего края на 50 пикселей, а с левого края на 100 пикселей, вызывая при этом переполнение документа.

Результат нашего примера:

Рис. 158 Пример относительного позиционирования элементов на странице.

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

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

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

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

Я думаю, что путешествуя по сети интернет, вы не раз встречали меню навигации, боковые панели, или даже кнопки «вверх страницы», которые были зафиксированы на одном месте. Всё это становится возможным благодаря фиксированному позиционированию.

Давайте рассмотрим пример, в котором мы оформим фиксированную боковую панель.

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Фиксированное позиционирование элементов</title>
<style>
html, body {
height: 100%;	/* высота элемента */
margin: 0; /* внешний отступ со всех сторон */
}
.fixed {
position: fixed; /* фиксированное позиционирование элемента */	
height: 100%; /* высота элемента */
width: 15%; /* ширина элемента */
background-color: red; /* цвет заднего фона */
right: 0; /* смещение от правого края */
}
.container {
height: 2000px; /* высота элемента */
}
</style>
</head>
	<body>
		<div class = "fixed">
			fixed
		</div>
		<div class = "container">
		</div>
	</body>
</html>

Давайте разберем, что мы сделали в этом примере:

• Установили для элементов <body> и <html> высоту равную 100%, это нам позволит задать высоту в процентах для нашей боковой панели. Кроме того, мы убрали внешние отступы (margin) для этих элементов, это необходимо, чтобы убрать встроенные стили браузера.
• Для нашей боковой панели установили высоту равной родительскому элементу (100%), установили ширину 15% от родительского элемента и установили цвет заднего фона красный. Кроме того указали, что наша боковая панель имеет фиксированное позиционирование, что позволяет её как будто прилепить к экрану. Чтобы наша панель отображалась справа, мы установили значение right равным 0 (смещение позиционированного элемента от правого края окна браузера).
• Для демонстрации фиксированного позиционирования мы создали контейнер высотой 2000 пикселей. Теперь если прокрутить страницу наша боковая панель останется на месте, а содержимое контейнера (основного содержимого) будет прокручиваться.

Результат нашего примера:

Рис. 159 Пример фиксированного позиционирования элементов на странице.

Статическое позиционирование

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

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

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

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

Мы уже с Вами узнали о том, что элемент с абсолютным позиционированием (position: absolute) позиционируется относительно заданного края его предка, при этом предок должен иметь значение position отличное от, установленного по умолчанию — static, иначе отсчёт (смещение) будет вестись относительно, указанного края окна браузера. Настало время рассмотреть подобный пример:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Абсолютное позиционирование относительно предка</title>
<style>
.relative {
position: relative; /* относительное позиционирование элемента */	
margin-top: 100px; /* внешний отступ от вержнего края */
width: 400px; /* ширина элемента */
height: 200px; /* высота элемента */
background-color: blue; /* цвет заднего фона */
}
.container {
height: 100px; /* высота элемента */	
background-color: yellow; /* цвет заднего фона */
}
.absolute {
position: absolute; /* абсолютное позиционирование элемента */
top: 0; /* смещение от вержнего края */
right: 0; /* смещение от правого края */
width: 50px; /* ширина элемента */
height: 50px; /* высота элемента */
background-color: red; /* цвет заднего фона */	
}
</style>
</head>
	<body>
	<div class = "relative">
		relative
		<div class = "container">
			container	
			<div class = "absolute">
				absolute
			</div>
		</div>
	</body>
</html> 

Давайте внимательно разберем, что мы сделали в этом примере:

• Для начала мы разместили блок (элемент <div>), который имеет относительное позиционирование. Указали для него внутренний отступ от верха (margin-top) равный 100 пикселей, задали ширину, высоту и цвет заднего фона.
• Далее внутри него разместили блочный элемент (элемент <div>), который имеет высоту 100 пикселей и цвет заднего фона жёлтый. Как вы понимаете, этот элемент имеет статическое позиционирование (значение по умолчанию), так как значение свойства position не наследуется, и он не унаследовал от родительского блока относительное позиционирование.
• Затем мы поместили внутри нашего контейнера со статическим позиционированием элемент, который имеет абсолютное позиционирование. Указали для него ширину и высоту равными 50 пикселей и цвет заднего фона красный. Обратите внимание на самый важный момент, что этот элемент позиционируется не относительно окна браузера, не относительно родительского элемента, а относительно своего предка, который имеет позиционирование, отличное от статического! В итоге наш элемент мы разместили в верхнем правом углу его предка с относительным позиционированием.

Результат нашего примера:

Рис. 160 Пример абсолютного позиционирования элемента относительно его предка.

Давайте подытожим изученную в этой статье учебника информацию о позиционировании элементов:

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

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

• Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:

• Используя полученные знания составьте следующий документ в котором:
  1. Навигационная панель прокручивается вместе со страницей (фиксированная навигационная панель).
  2. Кнопка «вверх» всегда находится в одном месте при прокрутке страницы.
  3. Продвинутое задание: При наведении на оранжевый блок вы увидите затемненную область с текстом во всю ширину и высоту блока.
  4. Продвинутое задание: Необходимо спозиционировать изображение относительно элементов списка.

  Практическое задание № 32.

  Подсказка: для последнего задания Вы можете использовать CSS псевдоэлемент ::before.

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

П {выравнивание текста: центр}
h3 {text-align: center} 

P.blocktext {
    маржа слева: авто;
    маржа-право: авто;
    ширина: 8em
}
...
 Это скорее ... 

IMG.displayed {
    дисплей: блок;
    маржа слева: авто;
    margin-right: auto}
...
 

DIV.container {
    мин-высота: 10em;
    дисплей: таблица-ячейка;
    вертикальное выравнивание: средний}
...

  
 Этот небольшой абзац ...
 

  
 Этот абзац…
 

div.container3 {
   высота: 10em;
    Позиция : относительная } / * 1 * /
div.container3 p {
   маржа: 0;
     позиция: абсолютная;  / * 2 * /
     верх: 50%;  / * 3 * /
     преобразование: перевод (0, -50%) } / * 4 * / 

div.container5 {
  высота: 10em;
    дисплей: гибкий; 
    align-items: center }
div.container5 p {
  маржа: 0} 

  
 По центру!
 

div.container4 {
    высота: 10em;
    position: relative}
div.container4 p {
    маржа: 0;
    фон: желтый;
    позиция: абсолютная;
    верх: 50%;
      осталось: 50%; 
      поле-право: -50%; 
    преобразовать: перевести ( -50%,  -50%)} 

div.container6 {
  высота: 10em;
  дисплей: гибкий;
  align-items: center;
    justify-content: center }
div.container6 p {
  маржа: 0} 

  <стиль>
    body {
        background: white}
    раздел {
        фон: черный;
        цвет белый;
        радиус границы: 1em;
        отступ: 1em;
          позиция: абсолютная; 
          верх: 50%; 
          осталось: 50%; 
          поле-право: -50%; 
          преобразование: перевод (-50%, -50%) }
  
  <раздел>
    
 Красиво по центру 
    
 Этот текстовый блок расположен по центру вертикально.
 И по горизонтали, если окно достаточно широкое.