Guillaume Duverger - Développement & Graphisme - Blog

Ils ont tué position absolute !
Vous êtes ici : Accueil Blog > Articles > CSS
Sommaire de l'article
  1. Le positionnement en CSS
  2. Le positionnement absolu
  3. Les grilles CSS : une nouvelle ère
  4. Aller plus loin

Le positionnement en CSS :

Le positionnement CSS permet de sortir un ou des éléments du flux normal d'un document HTML de manière à pouvoir se placer sur un autre (empilement), ou encore de pouvoir toujours rester à la même place (position fixe ou collante) dans le cadre du navigateur.

Le positionnement absolu

On utilise le positionnement absolu pour créer un contexte d'empilement. Pour faire simple, l'utilité du positionnement absolu est de placer un élément par dessus un autre (une superposition). Ce type de positionnement est plus que répandu en CSS depuis fort longtemps. Bien qu'assez simple à mettre en place, attention toutefois à ne pas multiplier les couches. L'exemple de l'overlay est un classique en positionnement CSS.

Ah ! C'est le positionnement absolu. Tuons-le ! Tuons-le !

Les grilles CSS : une nouvelle ère

Avec Le CSS Grid layout, une nouvelle ère est née. Ce modèle de disposition en grille propose un nouveau moyen de positionner des éléments, plus simplement et plus logiquement.

Avant l'arrivée des grilles CSS, le seul moyen de créer un slideshow en CSS était d'utiliser le positionnement absolu. On superposait les images les unes sur les autres et on mettait une animation CSS pour faire apparaître puis disparaître les photos.

Ci-dessous, un exemple de diaporama avec Grid layout :

Vous allez voir, c'est très simple à mettre en place.

Le code :

HTML


<div class="cadre-slideshow-auto">
<ul class="slideshow-auto">
<li><img src="image.jpg" alt></li>
<li><img src="image.jpg" alt></li>
<li><img src="image.jpg" alt></li>
</ul>
</div>



CSS


.cadre-slideshow-auto{
	
max-height: 800px;
max-width: 50rem;
margin: 2rem auto;
	
	}	
	

.slideshow-auto{
	 
  display: grid;/*on déclare le Grid layout*/
	 
}

.slideshow-auto li {

border: 10px solid white;
box-shadow:0 0 10px rgba(0, 0, 0, 0.2);

/*on empile tous les éléments sur la même colonne et la même rangée et rien de plus*/
grid-column: 1;
grid-row: 1;

opacity: 0;
animation: slide 9s linear infinite
}
	
	
.slideshow-auto li:nth-child(2)	{
	
	animation-delay: 3s
	
	}
	
.slideshow-auto li:nth-child(3)	{
	
	animation-delay: 6s
	
	}
	
@keyframes slide{

0%{

opacity: 0

}

12%{

opacity: 1;


}

25%{

opacity: 1;


}

37% {

opacity: 0;


}

100% {

opacity:0;

}

}	



Là où les grilles CSS vont nous être particulièrement utiles c'est pour placer des éléments de contrôle. Au lieu de déclarer un positionnement absolu pour chaque élément de contrôle, nous allons simplement les placer grâce au valeurs de placement du Grid layout. Et cela va nous simplifier grandement la vie. De plus, nous allons gagner en visibilité au niveau du code.

Vous pouvez retrouver le code de cette démonstration ici.

Bien entendu, il existe de nombreux autres cas où vous pourrez vous servir de cette technique, comme par exemple pour créer une carte de profil. Les grilles CSS bénéficiant d'un très bon support navigateurs, il est temps de les utiliser dans leur pleine mesure.

Source, inspiration, ressources :

Article (EN) sur le sujet

Autre article (EN)

Vous rencontrez un problème avec cet article ?

Vous avez remarqué une faute, un oubli, un lien mort ? Vous ne comprenez pas un point précis de l'article ? Vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne réponds qu'aux messages respectueux.

haut page