Mise en page CSS - La propriété position

Table des matières

La propriété position spécifie le type de méthode de positionnement utilisée pour un élément (statique, relatif, fixe, absolu ou collant).

La position Propriété

La propriété position spécifie le type de méthode de positionnement utilisé pour un élément.

Il existe cinq valeurs de position différentes :

static
relative
fixed
absolute
sticky

Les éléments sont ensuite positionnés en utilisant le haut, le bas, la gauche et la droite. propriétés. Cependant, ces propriétés ne fonctionneront que si la position la propriété est définie en premier. Ils fonctionnent également différemment selon le poste valeur.

Propriété CSS `position : statique;`

Les éléments HTML sont positionnés statiquement par défaut.

Les éléments positionnés statiquement ne sont pas affectés par les propriétés top, bottom, left et right.

Un élément avec position: static; n'est pas positionné de manière particulière ; c'est toujours positionné selon le déroulement normal de la page :

This <div> element has position: static;

Voici le CSS utilisé :

Exemple

div.static {
  position: static;
  border: 3px solid #73AD21;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
div.static {
  position: static;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: static;</h2>

<p>An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:</p>

<div class="static">
This div element has position: static;
</div>

</body>
</html>

Propriété CSS `position : relative ;`

Un élément avec position: relative; est positionné par rapport à sa position normale.

La définition des propriétés haut, droite, bas et gauche d'un élément positionné relativement entraînera il doit être ajusté hors de sa position normale. Les autres contenus ne seront pas ajustés pour s'adapter aux espaces laissés par le élément.

This <div> element has position: relative;

Voici le CSS utilisé :

Exemple

div.relative {
  position: relative;
  
left: 30px;
  border: 3px solid #73AD21;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: relative;</h2>

<p>An element with position: relative; is positioned relative to its normal position:</p>

<div class="relative">
This div element has position: relative;
</div>

</body>
</html>

Propriété CSS `position : corrigée ;`

Un élément avec position:fixed; est positionné par rapport à la fenêtre, ce qui signifie qu'il est toujours reste au même endroit même si la page défile. Haut, Les propriétés right, bottom et left sont utilisées pour positionner l'élément.

Un élément fixe ne laisse pas de vide dans la page là où il aurait normalement été situé.

Notez l'élément fixe dans le coin inférieur droit de la page. Voici le CSS utilisé :

Exemple

div.fixed {
  position: fixed;
  
bottom: 0;
  right: 0;
  width: 
300px;
  border: 3px solid #73AD21;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: fixed;</h2>

<p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>

<div class="fixed">
This div element has position: fixed;
</div>

</body>
</html>

This <div> element has position: fixed;

Propriété CSS `position : absolue;`

Un élément avec position : absolue; est positionné par rapport à l'ancêtre positionné le plus proche (au lieu de positionné par rapport à la fenêtre, comme fixe).

Cependant; si un élément positionné de manière absolue n'a pas d'ancêtres positionnés, il utilise le corps du document et se déplace avec le défilement des pages.

Remarque : Les éléments positionnés en absolu sont supprimés du flux normal et peuvent chevaucher des éléments.

Voici un exemple simple :

This <div> element has position: relative;

This <div> element has position: absolute;

Voici le CSS utilisé :

Exemple

div.relative {
  position: relative;
  
width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
}

div.absolute {
  position: absolute;	top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
} 

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: absolute;</h2>

<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):</p>

<div class="relative">This div element has position: relative;
  <div class="absolute">This div element has position: absolute;</div>
</div>

</body>
</html>

Propriété CSS `position : collante ;`

Un élément avec position: sticky; est positionné en fonction de la position de défilement de l'utilisateur.

Un élément collant bascule entre relatif et fixe, en fonction de la position de défilement. Il est positionné par rapport jusqu'à ce qu'une position de décalage donnée soit atteinte dans la fenêtre - puis il "colle" en place (comme position:fixed).

Remarque : Internet Explorer ne prend pas en charge le positionnement persistant. Safari nécessite un -webkit- préfixe (voir exemple ci-dessous). Vous devez également spécifier au moins l'un des éléments suivants : top, right, en bas ou gauche pour positionnement collant au travail.

Dans cet exemple, l'élément collant reste en haut de la page (top : 0), lorsque vous atteignez sa position de défilement.

Exemple

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: 
  sticky;
  top: 0;
  background-color: green;
  
  border: 2px solid #4CAF50;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>
</head>
<body>

<p>Try to <b>scroll</b> inside this frame to understand how sticky positioning works.</p>

<div class="sticky">I am sticky!</div>

<div style="padding-bottom:2000px">
  <p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.</p>
  <p>Scroll back up to remove the stickyness.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>

</body>
</html>

Positionnement du texte dans une image

Comment positionner du texte sur une image :

Exemple

Bottom Left

Top Left

Top Right

Bottom Right

Centered

Essayez-le vous-même :

En haut à gauche →

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.topleft {
  position: absolute;
  top: 8px;
  left: 16px;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>Add some text to an image in the top left corner:</p>

<div class="container">
  <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="topleft">Top Left</div>
</div>

</body>
</html>

En haut à droite →

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.topright {
  position: absolute;
  top: 8px;
  right: 16px;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>Add some text to an image in the top right corner:</p>

<div class="container">
  <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="topright">Top Right</div>
</div>

</body>
</html>

En bas à gauche →

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.bottomleft {
  position: absolute;
  bottom: 8px;
  left: 16px;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>Add some text to an image in the bottom left corner:</p>

<div class="container">
  <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="bottomleft">Bottom Left</div>
</div>

</body>
</html>

En bas à droite →

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.bottomright {
  position: absolute;
  bottom: 8px;
  right: 16px;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>Add some text to an image in the bottom right corner:</p>

<div class="container">
  <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="bottomright">Bottom Right</div>
</div>

</body>
</html>

Centré →

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.center {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>

<p>Center text in image:</p>

<div class="container">
  <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="center">Centered</div>
</div>

</body>
</html>

Plus d'exemples

Cet exemple montre comment définir la forme d'un élément. L'élément est découpé dans cette forme et affiché.

Définir la forme d'un élément

<!DOCTYPE html>
<html>
<head>
<style>
img {
  position: absolute;
  clip: rect(0px,60px,200px,0px);
}
</style>
</head>
<body>

<img src="w3css.gif" width="100" height="140">

</body>
</html>

Toutes les propriétés de positionnement CSS

bottom: Définit le bord de la marge inférieure pour une boîte positionnée
clip: Clipse un élément positionné de manière absolue
left: Définit le bord de la marge gauche pour une boîte positionnée
position: Spécifie le type de positionnement d'un élément
right: Définit le bord de la marge droite pour une boîte positionnée
top: Définit le bord de la marge supérieure d'une boîte positionnée

Mise en page CSS - La propriété position

Table des matières

La position Propriété

Propriété CSS position : statique;

Exemple

Propriété CSS position : relative ;

Exemple

Propriété CSS position : corrigée ;

Exemple

Propriété CSS position : absolue;

Exemple

Propriété CSS position : collante ;

Exemple

Positionnement du texte dans une image

Exemple

Plus d'exemples

Toutes les propriétés de positionnement CSS

Propriété CSS `position : statique;`

Propriété CSS `position : relative ;`

Propriété CSS `position : corrigée ;`

Propriété CSS `position : absolue;`

Propriété CSS `position : collante ;`