Feuilles de style : Les positionnements

Les prérequis
1 - Les bases de la structure Html
2 - Mise en forme

Présentation

Position spécifie le type de positionnement du document. Il en existe 3 types, static (le type par défaut), absolue, ou relative. Position absolueLa position absolue {position: absolute} se détermine par rapport au coin supérieur gauche de la fenêtre du browser.
Les coordonnées de ce point sont top = 0 et left = 0.

Il y a 3 options pour top et left :

auto (par défaut),
pixels (vous précisez la valeur suivie de px),
pourcentage (la même chose suivie de %).
Les coordonnées d'un point de haut en bas pour top et de gauche à droite pour left.

Pour appliquer une position absolue à un texte vous pouvez utiliser les balises SPAN ou DIV. La balise DIV est préférable pour les grands textes qu'elle fera précéder et suivre d'un saut de ligne; la balise SPAN, conçue comme simple marqueur, sera utilisée pour encadrer un paragraphe.Position relativeLa position relative {position: relative} se détermine par rapport à d'autres éléments de la page, par exemple un élément du code Html.
Un positionnement relatif sera donc traité dans le flux du document (qui est traité de bas en haut), et fera référence pour son positionnement à l'élément qui lui est immédiatement supérieur. Cette propriété est valable pour tous les types de balises.Exemple d'application

Soit l'image 1.jpg :

.toto {
position:absolute; top:10px; left:10px;
}
<BODY BGCOLOR="#000080" TEXT="#FF0000">
<IMG SRC="1.jpg" BORDER=0 WIDTH=50 HEIGHT=50>
<B><DIV CLASS="toto">Toto et titi</DIV></B>

Donne en position absolue :

et en position relative avec "Toto et Tata":

Attributs

Clip

Il s'applique uniquement aux éléments de position absolue. Il va spécifier la zone de visibilité du document, c'est à dire l'endroit où le document contenu dans les balises pourra ne plus être visible s'il dépasse les paramètres de largeurs et de hauteurs fixés par clip.
La syntaxe de clip varie selon les navigateurs, mais les recommandations du W3C sont du type:

clip:rect(haut,droite,bas,gauche)
Exemple : prenons l'image 1.jpg avec CLIP

<HEAD>
<STYLE TYPE="text/css">

</STYLE>
</HEAD>
<BODY BGCOLOR="#000080" TEXT="#FF0000">
<DIV CLASS="toto"><IMG SRC="1.jpg" BORDER=0 WIDTH=50 HEIGHT=50></DIV>
</BODY>

Donne :

Remarquez que les de l'image ont disparu !

Visibility :

Visibility, précise la visibilité ou non du document. Elle possède deux options qui n'ont pas la même syntaxe sous Explorer et sous Netscape.

Visible pour Explorer, show pour Netscape;
Hidden pour Explorer, hide pour Netscape.

L'option par défaut est bien entendu visible.

Z-index

Z-index, c'est l'attribut qui va définir l'empilement des feuilles de styles. Il indique l'axe vertical d'empilement, ou la priorité d'affichage entre éléments superposés. Il s'applique à tous les éléments de position relative ou absolue. Plus l'index est grand, plus l'élément est situé dessus. Plus il est bas, plus il est situé dessous.
Deux éléments de même index vont se superposer. C'est très pratique pour afficher du texte sur une image, ou vice-versa.

Exemple avec les deux images 1.jpg et 2.jpg :

donne :

Si l'on place le z-index:2 sur la classe Toto :

Lien vers cette page :
<a href="www.bibliotheque-des-esprits.com/formation-tutoriaux/formation-css/Positionnement-Css.php" title="Feuilles de style : Les positionnements">Feuilles de style : Les positionnements</a>

Nouveauté Blog
Ouverture des blogs des esprits ...!!!!