Chargement...

Position CSS


En CSS les éléments qui ont la propriété display:inline; sont affichés les uns à la suite des autres alors que les éléments ayant la propriété display:block; amène un retour à la line après leur affichage. Par défaut les éléments <a>, <b>, <i>, <span>, etc. sont des éléments inline contrairement à <div> ou <p>, <form> etc.

Relative Block

Les éléments de type Block occupe tout l'espace de la ligne et impose un retour à la ligne pour l'élément qui suit.
<style>
.div1
{
background-color:yellow;
}
.div2
{
background-color:gray;
}
</style>
<div class="div1">DIV 1</div>
<div class="div2">DIV 2</div>
Résultat:
DIV 1
DIV 2

Relative Inline

Les éléments de type Inline quand à eux se suivent les uns les autres. L'élément span est d'ailleurs complètement invisible par défaut.
<style>
.span1
{
background-color:yellow;
}
.span2
{
background-color:gray;
}
</style>
<div class="span1">SPAN 1</div>
<div class="span2">SPAN 2</div>
Résultat:
SPAN 1 SPAN 2

Absolute

Un élément qui a la propriété position:absolute; sera placé dans son conteneur ( qui a une position:relative; ) aux coordonnées qu'on lui définit.

Exemple:
<style>
#container
{
position:relative;
border:1px dashed #ccc;
}
#absolute_div
{
position:absolute;
background-color:yellow;
top:60px;
left:30px;
height:30px;
width:100px;
}
</style>
<div class="container">
<div class="absolute_div"></div>
</div>
Résultat:
absolute

Fixed

Un élément qui a la propriété position:fixed; sera toujours visible sur l'écran à condition que les coordonnées qu'on lui donne soit sur l'écran. Le menu en haut de page de ce site a cette propriété. Lorsque l'on scroll celui-ci reste au top de la fenêtre.


UNE QUESTION SUR L'ARTICLE?


CSSW Apprendre à créer son site web CSSW