8 Astuces CSS à connaitre absolument !

Ici, c'est libre, vous pouvez parler de tout ce qui vous passe par la tête !
Répondre
Avatar de l’utilisateur
Corbeau
Rang Marto
Rang Marto
Messages : 449
Inscription : 24 mai 2014, 07:25

8 Astuces CSS à connaitre absolument !

Message par Corbeau »

Astuce N°1
Pour cette première astuce, nous allons jouer avec la propriété z-index, elle n'est pas forcément bien comprise par tout le monde, on peut -des fois- se retrouver avec des valeurs un peu rocambolesque (99999999)...
Nous n'avons pas besoin d'arriver à ce genre d'extrémité on peut tout à faire utiliser le z-index de façon simple et maitrisée. Nous allons directement passer à une suite d'exemple :
HTML

Code : Tout sélectionner

<div class="parent parent-A">
	<div class="child child-A">.child-A</div>
</div>

<div class="parent parent-B">
	<div class="child child-B">.child-B</div>
</div>

<div class="parent parent-C">
	<div class="child child-C">.child-C</div>
</div>
CSS

Code : Tout sélectionner

.child {
widht: 5em;
height: 5em;
padding: 1em;
}











.child-B {
	top: 4em;
	left: 4em;
}

.child-C {
	top: 7em;
	left: 7em;
}






.child-A { background: tomato; }
.child-A { background: deepskyblue; }
.child-A { background: gold; }

body {
	padding: 1em;
{
SITUATION : Image


Nous avons 3 objets parent (A, B et C) qui contiennent chacun un enfant du même nom. Chacun de ces éléments enfants ont une hauteur / largeur fixes ainsi qu'une marge interne ainsi qu'une couleur attribuée.
Les éléments B et C ont des propriétés qui n'ont pour l'instant aucun impact.

Admettons que notre élément B ai une marge top négative pour légèrement le remonter ainsi qu'une marge left pour bien visualiser sur la situation
CSS

Code : Tout sélectionner

.child {
widht: 5em;
height: 5em;
padding: 1em;
}

.child-B {
	margin-top: -2em;
	margin-felt: 1em;
}







.child-B {
	top: 4em;
	left: 4em;
}

.child-C {
	top: 7em;
	left: 7em;
}






.child-A { background: tomato; }
.child-A { background: deepskyblue; }
.child-A { background: gold; }

body {
	padding: 1em;
{
SITUATION : Image

Notre élément B se retrouve au dessus de l'élément A, pourquoi ? Car quand nous n'avons pas de z-index et les élèments sont donc classés en fonction de leur source (donc B est après A)
Pour que notre élément A se retrouve au dessus, nous serions tenter d'appliquer un z-index
CSS

Code : Tout sélectionner

.child {
widht: 5em;
height: 5em;
padding: 1em;
}

.child-A {
	z-index: 1;
}

.child-B {
	margin-top: -2em;
	margin-felt: 1em;
}







.child-B {
	top: 4em;
	left: 4em;
}

.child-C {
	top: 7em;
	left: 7em;
}






.child-A { background: tomato; }
.child-A { background: deepskyblue; }
.child-A { background: gold; }

body {
	padding: 1em;
{
SITUATION : Image

Et nous constatons que cela ne fonctionne pas. Donc nous essayons 10, 100 puis 999999999. Et ça ne fonctionne toujours pas. Pourquoi ça ne fonctionne pas ? Tout simplement car pour qu'un z-index soit effectif il faut qu'il ai une position différente de statique, une position relative fera l'affaire

CSS

Code : Tout sélectionner

.child {
widht: 5em;
height: 5em;
padding: 1em;
}

.child-A {
	z-index: 1;
	position: relative;
}

.child-B {
	margin-top: -2em;
	margin-felt: 1em;
}







.child-B {
	top: 4em;
	left: 4em;
}

.child-C {
	top: 7em;
	left: 7em;
}






.child-A { background: tomato; }
.child-A { background: deepskyblue; }
.child-A { background: gold; }

body {
	padding: 1em;
{
SITUATION : Image

Cette fois nous constatons que cette fois, un simple 1 fonctionne
Pour qu'un z-index fonctionne, il faut que l'élément auquel il est appliqué ai un positionnement autre que statique

Cette fois, revenons à notre première situation et ajoutons un positionnement absolu pour tous nos éléments
CSS

Code : Tout sélectionner

.child {
widht: 5em;
height: 5em;
padding: 1em;
position: absolute;
}











.child-B {
	top: 4em;
	left: 4em;
}

.child-C {
	top: 7em;
	left: 7em;
}






.child-A { background: tomato; }
.child-A { background: deepskyblue; }
.child-A { background: gold; }

body {
	padding: 1em;
{
SITUATION : Image
Cette fois, nos propriétés des éléments B et C prennent effet et tout cela suit l'ordre de la source (A - B - C)

Si nous voulons faire remonter nos élément A au dessus, nous lui appliquons un z-index
CSS

Code : Tout sélectionner

.child {
widht: 5em;
height: 5em;
padding: 1em;
position: absolute;
}

.child-A {
	z-index: 1;
}









.child-B {
	top: 4em;
	left: 4em;
}

.child-C {
	top: 7em;
	left: 7em;
}






.child-A { background: tomato; }
.child-A { background: deepskyblue; }
.child-A { background: gold; }

body {
	padding: 1em;
{
SITUATION : Image
Le z-index est lié à la notion de contexte d'empilement (en anglais stacking context)
Les contextes d'empilements se créent dans un certain nombre de circonstances, mais surtout ils se créent quand un élément avec un positionnement autre que statique et un z-index autre que auto
Quand ça se produit, l'élément devient un nouveau contexte d'empilement et tout ses enfants vont interagir sur l'axe Z, entre eux, mais jamais hors de contexte d'empilement
Autrement dit, lorsque vous avez 2 contexte d'empilement, les enfants de chaque contexte ne peuvent pas interagir les uns les autres
Mettons cela en application :
CSS

Code : Tout sélectionner

.child {
widht: 5em;
height: 5em;
padding: 1em;
position: absolute;
}

.parent {
	position: relative;
	z-index: 1;
}









.child-B {
	top: 4em;
	left: 4em;
}

.child-C {
	top: 7em;
	left: 7em;
}






.child-A { background: tomato; }
.child-A { background: deepskyblue; }
.child-A { background: gold; }

body {
	padding: 1em;
{
SITUATION : Image
On ne le voit pas à l'écran mais nous avons cette fois bien 3 contextes d'empilements différents (parent A, parent B et parent C)

Maintenant, si on veut que A apparaisse au dessus de B et qu'on refait ce qui a été fait précédemment :
CSS

Code : Tout sélectionner

.child {
widht: 5em;
height: 5em;
padding: 1em;
position: absolute;
}

.parent {
	position: relative;
	z-index: 1;
}

.child-A {
	z-index: 2;
}







.child-B {
	top: 4em;
	left: 4em;
}

.child-C {
	top: 7em;
	left: 7em;
}






.child-A { background: tomato; }
.child-A { background: deepskyblue; }
.child-A { background: gold; }

body {
	padding: 1em;
{
SITUATION : Image
Rien ne se passe. Maintenant que parent A est un nouveau contexte d'empilement, l'enfant A ne peut pas s'en échapper
Autrement dit, la valeur de z-index de child-A aurait des effets uniquement si il y avait d'autres enfant au sein de parent-A
Il n'y a aucun moyen pour child-A de passer au dessus de child-B grâce à la propriété z-index, tout simplement car child-A et child-B sont dans 2 contextes d'empilement différents
Autrement dit, si on veut en fait en sorte que l'élément child-A passe au dessus de child-B, ce n'est pas la propriété z-index de child-A qu'il va falloir modifier mais celle de parent-A

CSS

Code : Tout sélectionner

.child {
widht: 5em;
height: 5em;
padding: 1em;
position: absolute;
}

.parent {
	position: relative;
	z-index: 1;
}

.parent-A {
	z-index: 2;
}







.child-B {
	top: 4em;
	left: 4em;
}

.child-C {
	top: 7em;
	left: 7em;
}






.child-A { background: tomato; }
.child-A { background: deepskyblue; }
.child-A { background: gold; }

body {
	padding: 1em;
{
SITUATION : Image

A ce niveau là, le contexte d'empilement de parent-A se trouve au dessus de parent-B

Un dernier point à comprendre : un positionnement autre que statique et un z-index autre que auto, ne sont pas les seuls critères qui peuvent déclencher un nouveau contexte d'empilement, il y en a plein d'autres, notamment une valeur d'opacité inférieur à 1

CSS

Code : Tout sélectionner

.child {
widht: 5em;
height: 5em;
padding: 1em;
position: absolute;
}

.parent {
	position: relative;
	opacity: 0.99;
}

.parent-A {
	z-index: 2;
}







.child-B {
	top: 4em;
	left: 4em;
}

.child-C {
	top: 7em;
	left: 7em;
}






.child-A { background: tomato; }
.child-A { background: deepskyblue; }
.child-A { background: gold; }

body {
	padding: 1em;
{
SITUATION : Image
Le fait d'avoir une opacité différente de 1 créer un nouveau contexte d'empilement

Il faut donc savoir que l'opacité joue sur les contextes d'empilement, de même que les filtres css type blur etc, les régions CSS également


Astuce N°2
je ferais les autres astuces plus tard cordialement
Avatar de l’utilisateur
70119w3n
Rang Skelerex
Rang Skelerex
Messages : 397
Inscription : 23 nov. 2011, 19:17
Favorite character : Yoshi
Localisation : Les pieds sur terre et la tête dans les étoiles ...

Re: 8 Astuces CSS à connaitre absolument !

Message par 70119w3n »

C'est mine de rien assez intéressant bien que saugrenu dans sa présentation, on attend la suite de loin
Image"Je choisirai le paradis pour le climat et l'enfer pour la compagnie" ; Mark Twain Image

Image
Avatar de l’utilisateur
Corbeau
Rang Marto
Rang Marto
Messages : 449
Inscription : 24 mai 2014, 07:25

Re: 8 Astuces CSS à connaitre absolument !

Message par Corbeau »

oui
Avatar de l’utilisateur
Creatu
Rang Yoshi
Rang Yoshi
Messages : 748
Inscription : 10 déc. 2011, 13:22
Favorite character : ballons
Contact :

Re: 8 Astuces CSS à connaitre absolument !

Message par Creatu »

j arrete pas de predre sur CS:S j en ai: Marre :diable:
Répondre