Description #
Le paramétrage du positionnement est un mode Avancé pour les utilisateurs experts.
Note :
– Pour chaque valeur numérique saisie dans une cellule doit obligatoirement être précédée de son unité.
– Dans une fonction calc(), l’opérateur de calcul doit être encadré par des espaces : ex. : calc(100% – 20px).
Les éléments à retenir sont :
– l’ordre de création des composants est important,
– insérer un nouveau composant entre des composants déjà présents implique la suppression des composants le précédant.
Tips :
– Avant de démarrer la conception du tableau de bord, effectuez une ébauche sur papier pour éviter les écueils liés à l’ordre de création.
Propriétés communes #
Positionnement #
Position du composant #
Permet de modifier le mode de positionnement du composant (par défaut en absolute).
Définition :
static :
C’est la valeur par défaut.
L’élément se place dans le flux normal de la page, sans position spéciale.
Tu ne peux pas utiliser top, left, right, bottom avec static.
👉 Exemple : un paragraphe ou une div normale.
relative :
L’élément reste dans le flux normal (comme static), mais tu peux le décaler avec top, left, etc.
L’espace qu’il occupe est toujours réservé à sa position initiale.
👉 Exemple : tu le bouges visuellement mais les autres éléments gardent leur place comme s’il n’avait pas bougé.
fixed :
L’élément est retiré du flux (il ne prend plus de place).
Il se positionne par rapport au premier parent qui a une position différente de static (souvent un conteneur en relative).
Si aucun parent n’est positionné, il se place par rapport à la page entière (body).
👉 Exemple : pour mettre un bouton pile dans un coin d’un bloc.
absolute :
L’élément est aussi retiré du flux.
Il est positionné par rapport à la fenêtre (viewport), peu importe le défilement.
Il reste toujours visible à l’endroit choisi, même si tu scrolles.
👉 Exemple : un menu fixe en haut de l’écran ou un bouton "remonter en haut".
sticky :
C’est un mélange entre relative et fixed.
L’élément est dans le flux comme relative, mais il peut rester collé (sticky = "collant") quand on défile.
Il se positionne par rapport à son parent conteneur et reste collé seulement jusqu’à la fin de ce parent.
Tu définis où il "colle" avec top, left, etc.
👉 Exemple : une en-tête de tableau qui reste visible quand tu descends, mais uniquement jusqu’à la fin du tableau.
Comparaison rapide :
static → normal.
relative → normal mais décalable.
absolute → hors flux, attaché au parent positionné.
fixed → hors flux, attaché à l’écran.
sticky → comme relative mais devient collant dans son parent quand on scrolle.
Pour plus de détails, suivez ce lien.
Position à partir du haut #
Permet de forcer la position du composant à partir du haut de la page.
Position à partir du bas #
Permet de forcer la position du composant à partir du bas de la page.
Position à partir du bord gauche #
Permet de forcer la position du composant à partir du bord gauche de la page.
Position à partir du bord droit #
Permet de forcer la position du composant à partir du bord droit de la page.
Rotation du composant #
Permet d'orienter le composant avec l'angle en degré souhaité (0 par défaut).
Largeur du composant (px, %, calc) #
Permet de la largeur du composant. Vous pouvez utiliser une valeur en % ou en fonction de la taille de la page (vw) ou calculée. Exemple : calc(100vw - 20px).
Hauteur du composant (px, %, calc) #
Permet de la largeur du composant. Vous pouvez utiliser une valeur en % ou en fonction de la taille de la page (vh) ou calculée. Exemple : calc(100vh - 20px).
Explication sur les unités px et % #
px (pixels)
→ Valeur fixe, ne change pas même si la taille de la fenêtre change.
👉 Exemple : width: 200px; → toujours 200 pixels de large.% (pourcentage)
→ Valeur relative, dépend de la taille du parent (le conteneur).
👉 Exemple : width: 50%; → prend la moitié de la largeur de son parent.
Explication sur la fonction calc() #
→ Permet de combiner plusieurs unités (px, %, em etc.) avec des opérations (+, -, *, /).
👉 Exemple : width: calc(100% - 50px); → prend toute la largeur du parent moins 50 pixels.
Exemples #
Positionnement #
Le code ci-dessous permet de visualiser dans une page HTML les différents types de positionnement d’un composant.
Méthode de test :
– Recopier le code ci-dessous dans une page html (exemple : postionnement.html) via un éditeur de fichier (notes, notepad++, …)
– Enregistrer la page
– Ouvrir la page avec un éditeur Web (Chrome, Google, …)
– Faire défiler la page et/ou zone de la page pour voir les différents effets
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemples position</title>
<style>
body {
font-family: sans-serif;
margin: 0;
padding: 0;
height: 2000px; /* pour pouvoir scroller */
}
.box {
width: 150px;
height: 100px;
margin: 20px;
padding: 10px;
color: white;
font-weight: bold;
text-align: center;
line-height: 100px;
}
.static {
background: gray;
position: static;
}
.relative {
background: blue;
position: relative;
top: 20px; /* décale vers le bas */
left: 40px; /* décale vers la droite */
}
.absolute-container {
position: relative; /* conteneur de référence */
height: 200px;
background: lightgray;
margin: 20px;
}
.absolute {
background: green;
position: absolute;
top: 20px;
right: 20px;
}
.fixed {
background: red;
position: fixed;
top: 0;
right: 0;
}
.sticky-container {
height: 300px;
background: lightyellow;
margin: 20px;
overflow: auto;
}
.sticky {
background: purple;
position: sticky;
top: 0; /* colle en haut du conteneur */
}
</style>
</head>
<body>
<div class="box static">static</div>
<div class="box relative">relative</div>
<div class="absolute-container">
Conteneur (gris clair)
<div class="box absolute">absolute</div>
</div>
<div class="box fixed">fixed</div>
<div class="sticky-container">
<div class="box sticky">sticky</div>
<p>Fais défiler ce conteneur 👇</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Praesent viverra felis id turpis aliquet feugiat.</p>
<p>Vestibulum ante ipsum primis in faucibus.</p>
<p>Sed luctus est sit amet eros bibendum finibus.</p>
<p>Donec a risus ac magna bibendum tempus.</p>
<p>Integer non nulla vel lectus sagittis congue.</p>
</div>
</body>
</html>
Du HTML vers BiBOARD #
Contexte #
Dans cet exemple, nous allons transposer le code ci-dessus à la mise en œuvre dans le Studio BiBOARD.
Ebauche #
a partir de la page HTML, nous définissons l’ordre de création des différentes zones à créer dans le Studio BiBOARD.
Les particularités notées de cette ébauche sont :
– l’ascenseur à droite qui ne sera peut-être présent à l’affichage si tous les composants sont contenus dans zone d’aperçu de la page.
– l’ascenseur de la zone ne sera pas présent car nativement celui-ci n’est pas présent pour un composant de type libellé (fond crème). Nous verrons comment l’ajouter dans notre composant.
Conception #
Pour chaque bloc à créer, il faut associer un groupe de rafraichissement. Pour les blocs, il faut :
1. Créer le groupe de rafraichissement (auquel on va affecter un fond pour bien visualiser l’affichage)
2. Configurer les options de positionnement
3. Créer le composant libellé
4. Configurer le composant libellé
Ces différents actions sont à répéter autant de fois que nécessaire.
Configuration de l’ensemble des blocs #
Tableau de bord
Configuration du bloc 1
Configuration du bloc 2
configuration du bloc 3
configuration du bloc 4
Configuration du bloc 5
Ajouter l’ascenseur dans le bloc 5
Pour cela, il faut appliquer sur le composant Groupe de rafraichissement la description donnée dans la FAQ –> Modifier un élément de style d’un composant sans modifier sa CSS.
Unités px et % #
Voici plusieurs petits exemples avec lesquels tu peux visualiser :px → valeurs fixes.% → dépend du parent.calc() → mélange et calcul dynamique.
Méthode de test :
– Recopier le code ci-dessous dans une page html (exemple : postionnement.html) via un éditeur de fichier (notes, notepad++, …)
– Enregistrer la page
– Ouvrir la page avec un éditeur Web (Chrome, Google, …)
– Faire défiler la page et/ou zone de la page pour voir les différents effets
px → valeurs fixes.
% → dépend du parent.
Largeur et hauteur en px (fixe) #
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple px</title>
<style>
.box {
background: lightblue;
width: 200px; /* largeur fixe */
height: 100px; /* hauteur fixe */
margin: 20px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="box">200px x 100px</div>
</body>
</html>
Largeur et hauteur en % (relatif au parent) #
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple %</title>
<style>
.parent {
background: lightgray;
width: 400px;
height: 200px;
margin: 20px;
padding: 10px;
}
.child {
background: lightgreen;
width: 50%; /* 50% de la largeur du parent */
height: 50%; /* 50% de la hauteur du parent */
}
</style>
</head>
<body>
<div class="parent">
Parent (400px x 200px)
<div class="child">50% x 50%</div>
</div>
</body>
</html>
Utilisation de calc() #
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple calc()</title>
<style>
.parent {
background: lightyellow;
width: 400px;
height: 200px;
margin: 20px;
padding: 10px;
}
.child {
background: coral;
width: calc(100% - 50px); /* largeur du parent - 50px */
height: calc(100% - 20px); /* hauteur du parent - 20px */
}
</style>
</head>
<body>
<div class="parent">
Parent (400px x 200px)
<div class="child">calc()</div>
</div>
</body>
</html>
Positionnement haut / bas / gauche / droite avec px, %, calc() #
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple positions</title>
<style>
.parent {
position: relative;
background: lightgray;
width: 400px;
height: 300px;
margin: 20px;
}
.child1 {
position: absolute;
background: skyblue;
top: 20px; left: 20px; /* en px */
width: 100px; height: 50px;
}
.child2 {
position: absolute;
background: lightgreen;
bottom: 10%; right: 10%; /* en % */
width: 80px; height: 50px;
}
.child3 {
position: absolute;
background: orange;
top: calc(50% - 25px); /* centré verticalement */
left: calc(50% - 50px); /* centré horizontalement */
width: 100px; height: 50px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child1">px</div>
<div class="child2">%</div>
<div class="child3">calc()</div>
</div>
</body>
</html>