Types de positionnement en CSS
Types de positionnement en CSS
-
Objectif
- Connaitre les différentes valeurs qu’on va pouvoir donner à position et apprendre à les utiliser adéquatement.
-
Introduction
- Un concept important à comprendre d’abord est que chaque élément d’une page Web est un bloc. Littéralement un rectangle de pixels. Cela est facile à comprendre lorsque vous définissez l’élément sur display: block;ou si cet élément est au niveau du bloc par défaut, comme un <div>.
- Cela signifie que vous pouvez définir un width et un height et que l’élément respectera cela. Mais les éléments qui sont
display: inline;, comme <span> par défaut, sont également des rectangles, ils se déplacent différemment sur la page, s’alignant horizontalement comme ils le peuvent. - Maintenant que vous imaginez chaque élément de page comme un bloc de pixels, nous pouvons parler de la façon dont le positionnement est utilisé pour amener les blocs de pixels exactement là où vous voulez qu’ils aillent.
-
Les types de positionnement
- Un élément positionné est un élément dont la propriété de position calculée est relative, absolute, fixed ou sticky.
- Un élément positionné de façon relative est un élément dont la propriété de position calculée est relative. Dans ce cas, les propriétés
topoubottomindiquent le décalage vertical à appliquer etleftourightindiquent le décalage horizontal. - Un élément positionné de façon absolue est un élément dont la propriété de position calculée est absolute ou fixed. Dans ce cas, les propriétés top, bottom, right et left indiquent les distances entre les bords de l’élément et les bords du bloc englobant (c’est-à-dire l’ancêtre par rapport auquel l’élément est positionné). Si l’élément possède des marges, elles sont ajoutées aux décalages.
- Un élément positionné en adhérence est un élément dont la propriété de position calculée vaut sticky. Un tel élément se comporte comme un élément positionné de façon relative jusqu’à ce que son bloc englobant dépasse un seuil donné (par exemple fourni par la valeur de top) au sein du conteneur puis il se comporte ensuite comme un élément fixe jusqu’à atteindre le bord opposé du bloc englobant.
-
Le positionnement
absolu - Il s’agit d’un type de positionnement très puissant qui vous permet de placer littéralement n’importe quel élément de page exactement où vous le souhaitez.
- Syntaxe: Syntaxe :
position: valeur; - Exemple:
position: absolute; top: 10px; right: 10px; - Une balise HTML avec une position absolue ne laisse aucun espace vide après qu’il est positionné. On place une balise HTML en position absolue en fixant la valeur de la propriété position à « absolute ». On peut alors utiliser les propriétés right, left, top et bottom pour placer la balise HTML.
-
Le positionnement
relatif - On place une div en position relative en avec la valeur de la propriété :
relative. - La différence entre position absolue et position relative est à la façon dont la position est définie. Pour une div en position relative, elle est calculée d’après sa position originale dans la page.
- En d’autres termes, si on déplace l’élément vers la droite, la gauche, le haut ou le bas. Ainsi, l’élément obtient toujours un espace dans la page après qu’il est positionné.
- Ce type de positionnement est probablement le plus déroutant et le plus mal utilisé. Ce que cela signifie vraiment est «relatif à lui-même». Si vous définissez position: relative;sur un élément , mais pas d’ autres attributs de positionnement ( top, left, bottomou right), il n’a pas d’ effet sur son positionnement du tout, ce sera exactement comme il serait si vous l’ avez laissé comme position: static;Mais si vous ne lui donnez un autre positionnement attribut, disons, top: 10px;il décalera sa position de 10 pixels vers le bas par rapport à son emplacement normal .
- A l’inverse d’un élément HTML positionné avec position :
static, un élément positionné avec position :relativeva ensuite pouvoir être décalé par rapport à sa position initiale grâce aux propriétéstop,left,bottometright. -
Le Le positionnement
static - Il s’agit de la valeur par défaut pour chaque élément de page. Différents éléments n’ont pas de valeurs par défaut différentes pour le positionnement, ils commencent tous comme
static. - Comportement normal (par défaut). L’élément est alors positionné dans le flux avec sa position. Les propriétés top, right, bottom, left et z-index ne s’appliquent pas.
- La valeur
staticest la valeur par défaut de la propriété position. Ainsi, par défaut, tous les éléments HTML sont positionnés de manièrestatic. - Un élément HTML positionné avec position :
staticsera positionné selon le flux normal de la page. -
Le positionnement
Sticky - Un élément positionné en
stickyaura une position « relative » jusqu’à ce que le scroll le fasse atteindre un certain décalage : à ce moment, sa position devient « fixed » (mais sans être en-dehors du flux d’affichage). - Si un élément est positionné avec CSS
{position : sticky}, sa position sera basée sur la position de défilement (scoll position) de l’utilisateur. - Un élément avec CSS
{position:sticky}sera changé de « relative » à « fixed » ou vice versa en fonction de la position du défilement de l’utilisateur. -
exemple
- Interpréter le code
- Fixer le div4 sous Le div 2 pendant le scroll
- Libérer le div 2
-
Application
- Réaliser une page listant quatre cours proposées par apcpedagogie.com pour aboutir au résultat suivant:
- On vous donne la structure HTML
See the Pen
Positionnement : absolute by Riadh HAJJI (@hriadh)
on CodePen.
Afficher le code
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title> floatttt </title>
<style>
h1{text-align: center;}
.div-general{width: 400px;
height: 400px;}
div{
width: 100px;
height: 100px;
background-color: azure;
border: 2px solid blue;
text-align: center;
line-height:100px;
vertical-align: middle;
}
/*#div_1 { position:absolute; top: 80px; left: 80px;}
#div_2 { position:absolute; top: 80px; right: 80px;}
#div_3 { position:absolute; bottom: 80px; right: 80px;}
#div_4 { position:absolute; bottom: 80px; left: 80px;}*/
#div_1 { position:relative; left: 35px; bottom: 35px;}
#div_2 { position:relative; left: 25px; bottom: 50px;}
#div_3 { position:relative; left: 15px; bottom: 70px;}
#div_4 { position:relative; left: 5px; bottom: 80px;}
</style>
</head>
<body>
<div class="div-general">
<div id="div_1">#div_1</div>
<div id="div_2">#div_2</div>
<div id="div_3">#div_3</div>
<div id="div_4">#div_4</div>
</div>
</body>
</html>
Copier l’exemple suivant
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title> floatttt </title>
<style>
h1{text-align: center;}
body {
margin: 0;
}
div {
width: 100%;
height: 50px;
border: black 1px solid;
color: white;
font-weight: bolder;
}
#container {
background: azure;
width: 200%;
height: 200vh;/* soit 2 fois la hauteur de la zone d'affichage */
margin-left: auto;
margin-right: auto;
}
#div_1 {
background: green;
width: 100%;
}
#div_2 {
background: blue;
position: sticky;
top: 0;
left: 0;
}
#div_3 {
background: purple;
}
#div_4 {
background: rgb(179, 250, 235);
}
</style>
</head>
<body>
<div id="container">
<div id="div_1">
Premier élément - div_1
</div>
<div id="div_2">
Deuxième élément - div_2
Je suis un élément qui ne disparesse pas au défilement
</div>
<div id="div_3">
Troisième élément - div_3
</div>
<div id="div_4">
Quatrième élément - div_4
</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="application-positionnement.css">
<title> floatttt </title>
</head>
<body>
<h1>Des cours adaptées à vos besoins</h1>
<ol>
<li id="html5">
<h2>Cours HTML5</h2>
<p><hr>
Ce cours de base vous explique comment manipuler
les différentes balises html:
</p>
<ul>
<li>Notion, attributs d’une balise html</li>
<li>Structure d’un document HTML</li>
<li>Les catégories d’éléments HTML5</li>
</ul>
</li>
<li id="css3">
<h2>Cours CSS3</h2>
<p><hr>
Sélection des meilleurs tutoriels et cours
formation gratuits pour apprendre le CSS du niveau débutant à expert:
</p>
<ul>
<li>Introduction aux CSS</li>
<li>Mise en pratique du CSS</li>
<li>les fondamentaux du Responsive Web Design</li>
<li>Divers</li>
</ul>
</li>
<li id="javascript">
<h2>Cours Javascript</h2>
<p><hr>
Ce cours aborde l’ensemble
des fonctionnalités de base et utiles du JavaScript.
Cependant, pour suivre ce cours dans de bonnes conditions,
il est essentiel que vous possédiez des bases en HTML et en CSS.
</p>
<ul>
<li>Introduction au JavaScript</li>
<li>Commentaires, indentation et syntaxe de base en JavaScript</li>
<li>Présentation des variables JavaScript</li>
<li>Les types de données en JavaScript</li>
<li>Structures de contrôle, conditions et opérateurs de comparaison JavaScript</li>
<li>Introduction à l’orienté objet en JavaScript</li>
</ul>
</li>
<li id="php">
<h2>Cours PHP</h2>
<p><hr>
PHP (officiellement, ce sigle est un acronyme récursif pour "PHP: Hypertext Preprocessor") est un langage de scripts généraliste, Open Source, et spécialement conçu pour le développement d'applications web. Il peut être intégré facilement à vos pages HTML.
Ci-dessous vous trouvez une liste des cours offertes
</p>
<ul>
<li>Introduction</li>
<li>Les variables prédéfinies</li>
<li>Afficher le contenu des variables</li>
<li>Les variables prédéfinies</li>
<li>Cours de PHP</li>
<li>Concaténer deux chaînes</li>
<li>Les structures de contrôles</li>
<li>Lire et écrire dans un fichier texte</li>
<li>Récupérer les données des formulaires</li>
<li>Les fonctions utilisateurs</li>
</ul>
</li>
</ol>
</body>
</html>
See the Pen
Mise en page centrée en 2 colonnes, header et pied de page by Riadh HAJJI (@hriadh)
on CodePen.
