La propriété position est utilisée pour définir la position d'un élément sur la page. Tous les éléments sont situés statiquement sur la page par défaut. La disposition statique définit la position d'un élément dans l'ordre séquentiel des éléments sur une page. Il s'agit de la position par défaut de chaque élément.

Si un élément est spécifié comme positionnable, sa position est passée de statique à l'une des quatre valeurs de propriété de position d'arrière-plan CSS possibles : relative, absolue, fixe, collante.

En plus des cinq valeurs mentionnées, deux nouvelles valeurs de propriété ont été ajoutées à CSS3 : page et center .

Une fois l'élément positionné ( a reçu une valeur non statique), sa position sur la page est déterminée à l'aide des propriétés de décalage : top , right , bottom et left . Les propriétés de décalage ne fonctionnent que sur les éléments positionnés, donc les appliquer aux éléments statiques ne fonctionne pas. Ces propriétés sont utilisées pour définir le décalage d'un élément par rapport à son contexte de positionnement.

Il s'agit du système de coordonnées que vous utilisez pour déterminer la position d'un élément à l'aide des propriétés de décalage.

Élément relativement positionné ( position : relative) définit la position de ses enfants en position absolue, ainsi que sa propre position. Cela signifie que vous pouvez déplacer un élément de sa position d'origine à l'aide des propriétés de décalage. Le point de référence de l'élément dans ce cas est sa position d'origine sur la page par rapport au coin supérieur gauche :

Un élément positionné relativement est déplacé de sa position d'origine après lui avoir appliqué la propriété position: relative. Le carré en pointillé représente la position d'origine de l'élément sur la page. L'élément est déplacé de 35 pixels vers le bas et de 35 pixels vers la droite par rapport à sa position d'origine.

Un élément positionné relativement qui est déplacé de sa position d'origine conserve sa position ordinale dans la « pile » du reste de la conception, et toute nouvelle position qu'il prend n'affecte pas le placement du contenu sur la page. Il peut facilement chevaucher d’autres éléments de la page. L'image ci-dessus montre comment la position d'origine d'un élément est conservée après son déplacement.

Lorsqu'un élément est positionné de manière absolue ( position : absolue), il peut être placé par rapport à un autre élément de la page. L'élément auquel il est placé par rapport doit déjà avoir une position donnée.

Avec CSS position relative, un élément positionné de manière absolue est positionné par rapport à un élément positionné relativement ( position : relative). L'origine du système de coordonnées est le coin supérieur gauche par rapport à l'élément positionné.

Par exemple, l'image suivante montre un élément placé de manière statique. Le carré rose flotte vers la gauche pour que le texte circule autour de lui :

Elément positionné statiquement

Le contour gris montre la bordure du conteneur carré rose. Le conteneur a été défini sur position: relative , il définit donc le contexte de positionnement du carré rose. Une fois le carré rose positionné de manière absolue, il est retiré du flux de pages et le texte est distribué comme si le carré n'avait jamais été dans le flux :

Le carré rose est positionné de manière absolue par rapport à son parent (bordures grises). Il se situe : en haut : 30px, à droite : 40px.

Si un élément est positionné de manière absolue et qu'aucun de ses parents n'a sa propriété de position définie, alors il est positionné par rapport à l'élément.

Un élément avec une position CSS fixe est positionné par rapport à la fenêtre. Il a le même comportement que les éléments positionnés de manière absolue : il est retiré du flux de la page et n'affecte plus la mise en page. Mais au lieu d'être positionné par rapport à n'importe quel élément de la page, il est positionné par rapport à la fenêtre et est indépendant du défilement : il est fixé dans la fenêtre à la position spécifiée par les propriétés de décalage.

Le positionnement fixe est généralement utilisé pour garder certains éléments visibles à tout moment. Par exemple, en-tête fixe, navigation.

Les valeurs des propriétés sticky , center et page sont encore expérimentales avec peu de support pour le moment.

Un élément avec un positionnement collant ( position : collante) est considéré comme un hybride d’éléments relatifs et fixes. Par exemple:

Élément ( position : collant ; haut : 70px ; )

L'élément donné se comportera comme s'il avait position: relative jusqu'à ce que la fenêtre atteigne un point lors du défilement situé à 10 pixels du haut de la fenêtre. Si l'élément est au-dessus, il sera fixé à 70 pixels du haut jusqu'à ce que le défilement du navigateur atteigne le seuil.

L'effet collant est généralement créé à l'aide de JavaScript, et une fois que la valeur collante est prise en charge par tous les navigateurs, elle peut être reproduite à l'aide de CSS.

Un point à noter : Vous devez spécifier un "seuil" pour l'élément "sticky" en utilisant l'une des propriétés de décalage, sinon l'élément ne fonctionnera pas et se comportera exactement comme s'il était positionné de manière relative.

La valeur centrale est utilisée pour centrer un élément dans un autre élément. L'élément centré sera placé au centre du conteneur et supprimé de la "pile" d'éléments de la page. Vous pouvez utiliser les propriétés de décalage pour déplacer un élément de sa position centrée.

Le comportement de la valeur de la propriété de position de la page n'est toujours pas clair. Il traite de la pagination et des conteneurs créés à l'aide des régions CSS.

Faits et notes intéressants

Les éléments avec une position CSS absolue qui utilisent des propriétés de décalage peuvent avoir un remplissage ( marges), qui sont placés dans le contexte de positionnement.

Un élément positionné de manière absolue occupera autant d’espace horizontal et vertical que son contenu l’exige. Il peut être étiré pour remplir toute la largeur de son contenant. Pour ce faire, vous devez laisser sa largeur ( largeur) n'est pas défini et positionnez sa bordure gauche sur la bordure gauche du parent, et sa bordure droite sur la bordure droite du parent, en utilisant les propriétés de décalage droite et gauche :

position : absolue ; gauche : 0 ; à droite : 0 ;

De même, un élément en position absolue peut être étiré verticalement à l'aide des propriétés top et bottom :

position : relative ; haut : 0 ; bas : 0 ;

Dans le cas où la hauteur et la largeur d'un élément avec un positionnement absolu CSS sont définies, alors :

• si les propriétés top et bottom sont définies, alors top a une plus grande force ;
• si la droite et la gauche sont définies, la gauche gagne ;
• si la propriété direction est rtl ( par exemple l'arabe), puis « gagne » à droite.

Les éléments fixes sont généralement positionnés par rapport à la fenêtre. Sauf lorsque vous appliquez la propriété transform à l'un des parents qui se chevauchent. Dans ce cas, l'élément transformé crée un bloc externe pour tous ses enfants positionnés, même ceux qui ont une position fixe.

Syntaxe officielle

Syntaxe:

position : statique | relatif | absolu | collant | centre | page | fixé

Valeur initiale : statique.

Applicable : tous les articles.

Utilisation dans les animations : Non.

Valeurs

statique

Algorithme de positionnement CSS par défaut. Le bloc est positionné selon le débit normal. Les propriétés top, right, bottom et left ne sont pas appliquées.

relatif

La position du bloc est calculée par rapport à sa position d'origine. Dans tous les cas, y compris les éléments du tableau, cela n’affecte pas la position des éléments ultérieurs.

L'effet de l'application de la propriété position: relative aux éléments du tableau :

• table-row-group , table-header-group , table-footer-group et table-row sont décalés par rapport à leur position normale dans le tableau. Si les cellules du tableau combinent plusieurs lignes, alors seules les cellules sont décalées par rapport à la ligne positionnée ;
• table-column-group , table-column ne décale pas la colonne correspondante lorsque la propriété position: relative est appliquée ;
• table-caption et table-cell sont décalés par rapport à leur position normale dans le tableau. Si une cellule de tableau s'étend sur plusieurs colonnes ou lignes, la totalité de la cellule composée est décalée.

absolu

La position du bloc est spécifiée par les propriétés top, right, bottom et left, qui décrivent le décalage par rapport au bloc extérieur. Les blocs positionnés de manière absolue sont supprimés du flux normal. Cela signifie qu'ils n'ont aucun effet sur la disposition des éléments suivants. Les blocs positionnés de manière absolue peuvent avoir un remplissage tant que le remplissage ne chevauche aucun autre remplissage

collant

La position du bloc est calculée en fonction du débit normal (comme position : relative ). Le bloc est décalé et fixe par rapport à la fenêtre et au bloc extérieur, et dans tous les cas, y compris les éléments du tableau, il n'affecte pas la position des éléments suivants. Lorsqu'un élément est positionné par collage, la position de l'élément suivant est fixée sans tenir compte du décalage. L’effet de l’application de position: sticky sur les éléments du tableau est le même que de l’application de position: relative .

centre

Le positionnement CSS des blocs est déterminé par les propriétés top , right , bottom et left . Le bloc est centré verticalement et horizontalement à l'intérieur du conteneur par rapport à la position centrale du bloc dans le conteneur contenant. Les blocs positionnés au centre sont retirés du flux normal. Cela signifie qu'ils n'affectent pas la disposition des éléments suivants (tout comme Absolute ). Les éléments positionnés au centre peuvent être mis en retrait à condition qu'ils ne se chevauchent pas avec d'autres.

page

La position du bloc est calculée selon le modèle absolu. Lorsqu'il est placé à l'intérieur d'une région, le bloc externe est toujours le conteneur initial.

Comme dans le modèle absolu, l’indentation de bloc ne chevauche aucune autre indentation.

Exemples

Parent ( position : relative; ) .child ( position : absolue ; haut : 10px ; gauche : 30px ; ) /* L'en-tête reste visible lors du défilement de la fenêtre */ header ( position : fixe ; haut : 0 ; gauche : 0 ; droite : 0; ) /* Cet élément devient collant dès que sa position par rapport au haut de la fenêtre est inférieure ou égale à 100px */ .sticky ( position: sticky; top: 100px; )

Démo

La démo suivante montre comment fonctionnent les quatre valeurs de positionnement de base : relative , absolue , fixe et même collante :

Voir la démo

Prise en charge du navigateur

La propriété position fonctionne dans tous les principaux navigateurs : Chrome, Firefox, Safari, Opera, Internet Explorer, ainsi qu'Android et iOS.

Mais la prise en charge des valeurs fixes et persistantes varie selon les navigateurs. Voici les tableaux de compatibilité pour ces deux valeurs :

Dans Internet Explorer, le positionnement fixe en CSS ne fonctionne pas si le document est en mode compatibilité.

La propriété CSS position est responsable de l'emplacement d'un élément par rapport aux autres éléments. Il est utilisé assez souvent dans les styles et est pris en charge par tous les navigateurs (Internet Explorer, Netscape, Opera, Safari, Mozilla, Firefox, Chrome, Yandex Browser). Donnons un exemple simple pour comprendre.

Exemple 1. Code HTML :

Обычный текст Этот текст ниже на 10 пикселей А этот наоборот выше

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

Это самый простой пример использования свойства CSS position . Теперь давайте рассмотрим все возможные атрибуты, которые может принимать этот параметр.

Синтаксис CSS position

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

Примечание: через | перечислены все его возможные значения. Рассмотри каждый параметр в отдельности

1. CSS position: relative

Свойство position: relative - относительное позиционирование. Мы видели пример использования этого элемента чуть выше.

При задании этого параметра, активизируются следующие параметры:

• bottom
• left
• right

Если не указано никаких смещений, т.е.

top : 0px ; bottom : 0px ; left : 0px ; right : 0px ;

то отображение html-элемента происходит на том же месте как и по умолчанию (т.е. без задания relative). Если же указаны смещения, то элемент будет смещен относительно своего расположения либо ниже, выше, левее или правее. При этом другие окружающие элементы считают, что никакого смещения нету. Короче говоря, использовать relative имеет смысл только если мы задали смещения.

Для пояснения этой особенности приведем пример.

Примера 2 . HTML-код:

В чем же тогда разница?...

Примера 2* . Добавим к первому диву: position: relative; . HTML-код:

В чем же тогда разница? ...

Код преобразуется в следующее:

Наш красный квадрат переместился на 200 пикселей влево и на 100 пикселей вниз и частично своей площадью закрыл текст. При этом то место, где должен был наш квадрат текст по-прежнему его огибает как будто он там есть.

2. CSS position: absolute

Свойство CSS position: absolute - в данном случае считается, что начало отсчета - левый верхний угол. Здесь также действуют свойства top , bottom , left , right . При этом элемент который обладает атрибутом absolute становится как бы блочным элементом. Приведем пример.

Примера 3 . HTML-код:

Текст один Текст два Текст три

Код преобразуется в следующее:

В данном случае все три текста написаны друг за другом. Заметим, что мы специально сделали отступ слева padding-left:100px; в 100 пикселей. Теперь рассмотрим, что будет если мы во второй font добавим атрибут position: absolute .

Примера 3* . HTML-код:

Текст один Текст два Текст три

Код преобразуется в следующее:

Заметим, что текст два уехал влево и теперь стоит на первой позиции. При этом текст три занял место второго. Почему так произошло? Потому что мы добавили position:absolute и отступ слева: left:0px . Как я писал выше, при атрибуте absolute начало отсчета для элемента становится - левый верхний угол.

3. CSS position: fixed

Свойство CSS position: fixed - фиксированное расположение элемента, даже при прокрутке скролла. Пожалуй, это один из самых распространенных вариантов использования position. Если при этом заданы параметры top и left, то элемент будет размещен относительно левого верхнего угла. Если же параметры не указаны, то он будет фиксироваться в таком положении, как он встретиться на странице. Приведем пример.

Примера 4. HTML-код:

Фиксированный текст

Тут идет текст текст текст
Тут идет текст текст текст ...

Код преобразуется в следующее:

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

4. Остальные значения CSS position

4.1. Свойство position: static - этот параметр стоит по умолчанию. Параметры left, top, right и bottom не работают при этом значении.

4.2. Свойство position: inherit - наследование значение родителя. Т.е. смотрится ближайший элемент, в который заключен этот html-элемент и наследуется его значение.

Для обращения к position из JavaScript нужно писать следующую конструкцию:

document.getElementById("elementID").style.position ="VALUE "

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

Специфика построения потока документа

работает с потоком веб-страницы. Как это понять? По умолчанию все элементы страницы располагаются в том порядке, в котором вы создали их в html- разметке. Если тег header расположен над тегом footer, то и на странице он будет отображаться выше. И наоборот, если вы почему-то решите разместить footer в html над «хедером», «подвал» страницы будет отображаться над «шапкой». При этом блочные элементы занимают всю доступную для них ширину. Строчные, в свою очередь, располагаются в одну строку, пока не займут ее всю, а потом начнут переноситься на новую. Этот порядок именуется «потоком документа».

Для изменения поведения потока используется свойство Position в CSS . Также он может меняться из-за свойства float, но его мы рассматривать не будем. С помощью позиционирования можно заставить элемент «выпасть» из обычного потока, после чего он начнет вести себя по-новому. Как именно - зависит от использованного значения свойства.

CSS Position: static

Position: static, или статическое позиционирование, является значением по умолчанию для всех блоков html, которые вы создали. В обычных условиях вам не придется иметь с ним дело. Если для какого-нибудь блока или строки не задано вообще никакого позиционирования, значит, оно имеет значение static. На странице такой компонент отображается в соответствии с потоком. Если указать ему свойства right/left или top/bottom, никакого эффекта не будет.

CSS Position: fixed

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

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

CSS Position: relative

Использование этого свойства называется относительным позиционированием . Если задать элементу свойство Position : relative, тот останется на своем месте. На первый взгляд, ничего особенного не произойдет, но все измениться, если дополнительно использовать свойства right/left и top/bottom. С их помощью можно управлять перемещением компонента относительно его местоположения. На том месте, где блок или строка были раньше, окажется пустое пространство - другие элементы останутся на своих положениях, не обращая внимания на освободившееся место .

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

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

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

Во-первых, положением элемента можно свободно управлять - для этого используются свойства top/right/bottom/left. Например, если вы зададите значение bottom : 100px, блок «оттолкнется» от нижней част страницы на 100 пикселей. Во-вторых, при скроллинге «абсолютный» компонент останется на своем месте, вместо того, чтобы перемещаться со страницей.

Взаимодействие абсолютных блоков с родительскими элементами

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

Рассмотрим пример. У вас есть div с классом relative-div, внутри которого размещается div с классом absolute-div. Задаем внутреннему блоку свойство Position : absolute. Тот сразу же «вылетает» из потока и оказывается где-то вверху, ведь теперь его расположение просчитывается относительно окна браузера. Теперь задаем блоку с классом relative-div свойство Position : relative и «блудный сын» возвращается на место. Почти. На самом деле, он оказывается в верхнем левом углу родительского элемента.

Почему так происходит? Дело в специфике свойства Position : absolute. По умолчанию его положение зависит от окна браузера, но если «родитель» тоже позиционирован как-то кроме static, позиция начинает зависеть от родительского элемента. Это очень удобно, потому что можно разместить компонент в любом месте, не просчитывая огромные цифры относительно окна браузера. Прием часто используется для размещения иконок, кнопок и других небольших элементов.

Одна из главных трудностей новичков состоит в том, чтобы центрировать элемент вертикально и горизонтально. Грамотно используя свойство Position , сделать это проще простого. CSS Position: absolute по центру устанавливается следующим образом. Допустим, у вас есть d iv с классом absolute-div, который находится в «диве» с классом relative-div. «Родитель» позиционирован относительно и его ширина равна ширине всей страницы. «Потомок» имеет ширину и высоту 400 px, абсолютное позиционирование и по умолчанию располагается в верхнем левом углу родительского элемента.

Все, что нужно сделать - это задать абсолютному компоненту top: 50 % и left: 50 %. Почти готово! Absolute-div сдвинулся с места и оказался почти в центре, но не совсем. Середины «родителя» касаются его края, а нам нужно, чтобы в центре блока оказался центр «потомка». Для этого нужно задать ему margin-left и margin-right со значениями -200 px. Тем самым мы сместим абсолютно позиционированный блок на половину его высоты и ширины. Все, он в центре!

Перекрывание компонентов

Проблемой может стать непростое, на первый взгляд, «наложение» позиционированных элементов на их «соседей». Например, компонент с Position : fixed будет перекрывать все, что расположено на странице. Исправить ситуацию можно с помощью свойства z-index, однако помните, что оно работает только для позиционированных элементов. Соответственно, если вы хотите размещать блок поверх фиксировано позиционированного элемента, этому блоку придется также задать позиционирование. Например, относительное.

Л учший способ освоить позиционирование - рассматривать примеры Position CSS, экспериментировать и пробовать что-то свое. Постарайтесь научиться использовать его в сочетании с функцией calc() - это даст возможность более гибко настраивать расположение. Однако помните, что это свойство не предназначено для выстраивания всей «сетки» страницы. С его помощью нужно перемещать относительно небольшие элементы, иначе можно слишком легко запутаться.

И left , они позволяют произвести смещение позиционированного элемента относительно определенного края. Ниже в примере рассмотрены возможные типы позиционирования элемента:

1. position : relative (элемент с относительным позиционированием). При использовании свойства left позиционированный элемент смещается относительно его текущей позиции (отрицательное значение смещает элемент влево, положительное значение вправо). На примере left: 200px;
2. position : absolute (элемент с абсолютным позиционированием). При использовании свойства left позиционированный элемент смещается относительно левого края его предка (отрицательное значение смещает элемент влево, положительное значение вправо), при этом предок должен иметь значение position отличное от установленного по умолчанию - static , иначе отсчёт будет вестись относительно левого края окна браузера (как при значении position fixed ). На примере left : 40px .
3. position : fixed (элемент с фиксированным позиционированием). При использовании свойства left позиционированный элемент смещается относительно левого края окна браузера (отрицательное значение смещает элемент влево, положительное значение вправо). На примере left : 40px .
4. position : static (элемент со статическим позиционированием - является значением по умолчанию). Значение свойства left не повлияет на позиционирование элемента.

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

Поддержка браузерами

Свойство			Opera		IExplorer	Edge
position	1.0	1.0	4.0	1.0	7.0	12.0

CSS синтаксис:

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

JavaScript синтаксис:

Object.style.position = "absolute"

Значения свойства

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

Версия CSS

CSS2

Наследуется

Нет.

Анимируемое

Нет.

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

h1(position:statique;)

Cet exemple utilise tous les types de positionnement possibles à des fins de démonstration : statique, relatif, absolu et fixe. Le résultat de notre exemple.

Le positionnement est l'un des concepts clés de la disposition des blocs. Une fois que vous l’aurez compris, beaucoup de choses deviendront claires pour vous et la mise en page passera du chamanisme à un processus significatif. Cet article se concentrera donc sur les propriétés CSS. position Et flotter.

1. position : statique

Par défaut, tous les éléments de la page ont un positionnement statique (position : static), ce qui signifie que l'élément n'est pas positionné, et apparaît dans le document à sa place habituelle, c'est-à-dire dans le même ordre que dans le balisage html.

Il n'est pas nécessaire d'attribuer spécifiquement cette propriété à un élément, sauf si vous devez modifier le positionnement précédemment défini par défaut.

#content( position : statique; )

2.position : relative

Le positionnement relatif (position : relative) vous permet d'utiliser les propriétés top, bottom, left et right pour positionner un élément par rapport à l'endroit où il apparaîtrait s'il était positionné normalement.

Déplaçons #content de 20 pixels vers le bas et de 40 pixels vers la gauche :

#content( position : relative ; haut : 20px ; gauche : -40px ; )

Notez qu'il y a maintenant un espace vide là où aurait dû se trouver notre bloc #content. Suite au bloc #content, le bloc #footer n'est pas descendu car #content occupe toujours sa place dans le document même si nous l'avons déplacé.

À ce stade, il peut sembler que le positionnement relatif n'est pas très utile, mais ne vous précipitez pas pour tirer des conclusions, vous apprendrez plus loin dans l'article à quoi il peut être utilisé.

3. position : absolue

Avec un positionnement absolu (position : absolue), l'élément est supprimé du document et apparaît là où vous le lui demandez.

Déplaçons par exemple le bloc #div-1a dans le coin supérieur droit de la page :

#div-1a ( position : absolue ; haut : 0 ; droite : 0 ; largeur : 200 px ; )

Notez que cette fois, le bloc #div-1a ayant été supprimé du document, les éléments restants sur la page ont été positionnés différemment : #div-1b, #div-1c et #footer ont été déplacés vers le haut, à la place du bloc supprimé. . Et le bloc #div-1a lui-même est situé exactement dans le coin supérieur droit de la page.

De cette façon, nous pouvons positionner n'importe quel élément par rapport à la page, mais cela ne suffit pas. En fait, nous devons positionner #div-1a par rapport au bloc parent #content. Et à ce stade, le positionnement relatif entre à nouveau en jeu.

4. position : fixe

Le positionnement fixe (position : fixe) est une sous-section du positionnement absolu. Sa seule différence est qu'il est toujours dans la zone visible de l'écran et ne bouge pas lors du défilement de la page. En ce sens, c’est un peu comme une image de fond fixe.

#div-1a ( position:fixe; haut:0; droite:0; largeur:200px; )

Dans IE avec position : corrigé, tout n'est pas aussi fluide que nous le souhaiterions, mais cela existe de nombreuses façons contourner ces restrictions.

5. position : relative + position : absolue

En attribuant une position relative au bloc #content (position : relative), nous pouvons positionner n'importe quel élément enfant par rapport à ses limites. Plaçons un bloc #div-1a dans le coin supérieur droit du bloc #content.

#content ( position:relative; ) #div-1a ( position:absolue; haut:0; droite:0; largeur:200px; )

6. Deux colonnes

Fort des connaissances acquises lors des étapes précédentes, vous pouvez essayer de créer deux colonnes en utilisant le positionnement relatif et absolu.

#content ( position:relative; ) #div-1a ( position:absolue; haut:0; droite:0; largeur:200px; ) #div-1b ( position:absolue; haut:0; gauche:0; largeur:200px ; )

L'un des avantages du positionnement absolu est la possibilité de placer les éléments dans n'importe quel ordre, quelle que soit la façon dont ils se trouvent dans le balisage. Dans l'exemple ci-dessus, le bloc #div-1b est placé avant le bloc #div-1a.

Et maintenant, vous devriez vous poser une question : « Où sont passés le reste des éléments de notre exemple ? Ils se cachaient sous des blocs parfaitement placés. Heureusement, il existe un moyen de résoudre ce problème.

7. Deux colonnes à hauteur fixe

Une solution consiste à donner une hauteur fixe au conteneur contenant les colonnes.

#content ( position : relative ; hauteur : 450 px ; ) #div-1a ( position : absolue ; haut : 0 ; droite : 0 ; largeur : 200 px ; ) #div-1b ( position : absolue ; haut : 0 ; gauche : 0 ;largeur:200px;

La solution n'est pas très adaptée, puisqu'on ne sait jamais à l'avance quelle taille le texte sera situé dans les colonnes, et quelle police sera utilisée.

8. Flotteur

Pour les colonnes à hauteur variable, le positionnement absolu n'est pas une option, examinons donc une autre option.

En attribuant un flottant au bloc, on le pousse le plus loin possible vers le bord droit (ou gauche), et le texte suivant le bloc circulera autour de lui. Cette technique est généralement utilisée pour les images, mais nous l'utiliserons pour une tâche plus complexe puisque c'est le seul outil à notre disposition.

#div-1a ( float:gauche; largeur:200px; )

9. Haut-parleurs « flottants »

Si nous attribuons float: left au premier bloc puis float: left au second, chaque bloc sera poussé vers le bord gauche, et nous obtiendrons deux colonnes, de hauteur variable.

#div-1a ( float:gauche; largeur:150px; ) #div-1b ( float:gauche; largeur:150px; )

Vous pouvez également attribuer la valeur float opposée aux colonnes, auquel cas elles seront réparties le long des bords du conteneur.

#div-1a ( float:droite; largeur:150px; ) #div-1b ( float:gauche; largeur:150px; )

Mais maintenant, nous avons un autre problème : les colonnes s'étendent au-delà du conteneur parent, brisant ainsi toute la mise en page. Il s’agit du problème le plus courant chez les maquettistes débutants, bien qu’il puisse être résolu assez simplement.

10. Flotteur de nettoyage

Le nettoyage des flotteurs peut être effectué de deux manières. S'il y a un autre bloc après les colonnes, il suffit de lui attribuer clear: les deux.

#div-1a ( float:gauche; largeur:190px; ) #div-1b ( float:gauche; largeur:190px; ) #div-1c ( clear:les deux; )

Ou attribuez la propriété overflow: Hidden au conteneur parent

#contenu (débordement:caché; )

Dans tous les cas, le résultat sera le même.

Conclusion

Aujourd’hui, seules les techniques de positionnement de base et les exemples les plus simples ont été pris en compte. De plus, pour aider les maquettistes débutants, je recommande toujours une série d'articles d'Ivan Sagalayev, qui m'a beaucoup aidé à un moment donné.