Glossaire des propriétés CSS

VI. Propriétés d'affichage et de positionnement▲

VI-A. Affichage▲

VI-A-1. Type d'élément | display▲

display : définit comment doit être affiché un élément HTML.

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 7+

Notes : la valeur inline-block n'est supportée par IE 6 que pour les éléments initialement inline ; les valeurs inline-table, table, table-caption, table-cell, table-column, table-column-group, table-row, table-row-group et inherit ne sont pas supportées par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte ces valeurs.

Version CSS : 1

On ne va reprendre ici que ceux étant les plus utilisés :

none : l'élément ne sera pas affiché ;
block : l'élément devient de type "bloc" (comme <div>). Un élément de type bloc ajoute un espace avant et après le bloc, ainsi qu'un saut de ligne ;
inline : l'élément devient de type "inline" (en ligne, comme <span>). Valeur par défaut. Il n'y a pas d'espace avant ni après et n'ajoute pas de saut de ligne ;
inline-block : l'élément est affiché comme un "inline" mais peut être redimensionné comme un bloc ;
list-item : l'élément devient de type "élément de liste à puce" (comme <li>) ;
table : l'élément est affiché comme une table ;
table-caption : l'élément est affiché comme le titre d'un tableau ;
table-cell : l'élément est affiché comme une cellule de tableau ;
table-column : l'élément est affiché comme une colonne de tableau ;
table-column-group : l'élément est affiché comme un groupe de colonnes (<colgroup>) ;
table-header-group : l'élément est affiché comme l'en-tête d'un tableau ;
table-footer-group : l'élément est affiché comme le pied de page d'un tableau ;
table-row : l'élément est affiché comme une ligne de tableau ;
table-row-group : l'élément est affiché comme un groupe de lignes.

Sélectionnez

display: none;
display: block;
display: inline;
display: inline-block;

Lorem ipsum dolore sit amet, consectetur adipisicing elit

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .display1 {
        display: none;
        background-color: red;
    }
 
    .display2 {
        display: block;
        background-color: red;
    }
 
    .display3 {
        display: inline;
        background-color: red;
    }
 
    .display4 {
        display: inline-block;
        background-color: red;
    }
</style>
<div style="border: 2px solid #696969; background-color: #93caff; margin-bottom: 10px;">Lorem ipsum dolore sit amet, 
<span class="display1">consectetur</span> adipisicing elit</div>
<div style="border: 2px solid #696969; background-color: #93caff; margin-bottom: 10px;">Lorem ipsum dolore sit amet, 
<span class="display2">consectetur</span> adipisicing elit</div>
<div style="border: 2px solid #696969; background-color: #93caff; margin-bottom: 10px;">Lorem ipsum dolore sit amet, 
<span class="display3">consectetur</span> adipisicing elit</div>
<div style="border: 2px solid #696969; background-color: #93caff; margin-bottom: 10px;">Lorem ipsum dolore sit amet, 
<span class="display4">consectetur</span> adipisicing elit</div>

VI-A-2. Affichage | visibility▲

visibility : permet d'afficher ou de masquer un élément.

Syntaxe : visible | hidden | collapse | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : les valeurs inherit et collapse ne sont pas supportées par IE 8 et précédents.

Version CSS : 2.1

Contrairement à display: none;, l'élément masqué occupe toujours l'espace dans la page.

visible : l'élément est affiché ;
hidden : l'élément est masqué mais conserve son espace dans la page ;
collapse : cache une ligne ou une colonne d'un tableau.

Sélectionnez

visibility: visible;
visibility: hidden;
visibility: collapse;
display: none;

lorem ipsum dolore sit amet, consectetur adipisicing elit.

Ici la phrase est affichée.

lorem ipsum dolore sit amet, consectetur adipisicing elit.

Ici la phrase sera masquée mais l'espace est conservé.

lorem ipsum dolore sit amet, consectetur adipisicing elit.

Ici c'est une ligne d'un tableau que l'on masque

lorem ipsum dolore sit amet, consectetur adipisicing elit.

Ici la phrase est masquée et l'espace supprimé.

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .visible1 {
        visibility: visible;
    }
 
    .visible2 {
        visibility: hidden;
    }
 
    .visible3 {
        visibility: collapse;
    }
 
    .display {
        display: none;
    }
</style>
<div style="margin-bottom: 10px; border: 2px solid #696969; background-color: #93caff; padding: 10px; width: 60%;">
    <div>lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
    <div class="visible1">lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
    <div>lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
    <p>Ici la phrase est affichée.</p>
</div>
<div style="margin-bottom: 10px; border: 2px solid #696969; background-color: #93caff; padding: 10px; width: 60%;">
    <div>lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
    <div class="visible2">lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
    <div>lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
    <p>Ici la phrase sera masquée mais l'espace est conservé.</p>
</div>
<div style="margin-bottom: 10px; background-color: #93caff; padding: 10px; width: 60%;">
    <table>
    <tr id="visible3" class="visible3">
        <td>lorem ipsum dolore sit amet, consectetur adipisicing elit.</td>
    </tr>
    <tr>
        <td>lorem ipsum dolore sit amet, consectetur adipisicing elit.</td>
    </tr>
    <tr>
        <td><button>Cliquez ici</button></td>
    </tr>
    </table>
    <p>Ici c'est une ligne d'un tableau que l'on masque</p>
</div>
<div style="margin-bottom: 10px; border: 2px solid #696969; background-color: #93caff; padding: 10px; width: 60%;">
    <div>lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
    <div class="display">lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
    <div>lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
    <p>Ici la phrase est masquée et l'espace supprimé.</p>
</div>

VI-A-3. Afficher seulement une partie | clip▲

clip : permet de spécifier une zone visible d'un élément.

Syntaxe : <shape> | auto | inherit

Compatibilité : IE 5.5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Indiquer quatre valeurs à la suite :

Sélectionnez

clip: rect(0px, 50px, 50px, 0px);
clip: rect(10px, 90px, 60px, 10px);

Cela permet de n'afficher qu'une partie d'un élément. rect() permet d'indiquer les coordonnées du rectangle qui sera affiché.
Les valeurs 1 à 4 correspondent respectivement aux coins haut, droite, bas et gauche du rectangle.

Attention, clip ne s'applique qu'aux éléments dont la position est absolue.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .clip1 {
        position: absolute;
        clip: rect(0px 50px 50px 0px);
        width: 150px;
        border: 2px solid #696969;
        background-color: #93caff;
    }
 
    .clip2 {
        position: absolute;
        clip: rect(10px, 90px, 60px, 10px);
        width: 150px;
        border: 2px solid #696969;
        background-color: #93caff;
        left: 150px;
    }
</style>
<div style="position: relative; height: 110px;">
    <div class="clip1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
    incididunt ut labore et dolore magna aliqua.</div>
    <div class="clip2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
    incididunt ut labore et dolore magna aliqua.</div>
</div>

VI-A-4. Limiter les dimensions | overflow▲

overflow : permet de déterminer comment sera affiché le contenu d'un élément quand il dépasse les limites de son conteneur. C'est utilisé, entre autres, pour afficher des barres de défilement.

Syntaxe : visible | hidden | scroll | auto | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 7+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 2.1

visible : tout l'élément sera affiché (par défaut) ;
hidden : l'élément sera masqué s'il dépasse les limites définies par height et width. On ne pourra pas voir la partie du texte masquée ;
scroll : tout comme pour hidden, l'élément sera coupé s'il dépasse les limites. Cette fois le navigateur ajoutera des barres de défilement pour qu'on puisse voir la suite du texte. Ces barres seront obligatoirement affichées, même si celles-ci ne sont pas nécessaires ;
auto : c'est le navigateur qui décide d'ajouter des barres de défilement ou pas en fonction des cas.

Cette propriété peut être étendue par overflow-x et overflow-y.

Sélectionnez

overflow: visible;
overflow: hidden;
overflow: scroll;
overflow: auto;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultricies est in dui aliquet vel dictum tellus sagittis. Etiam fringilla laoreet tortor, ut dapibus ligula pharetra eget. Pellentesque faucibus eleifend faucibus. Nam sapien lacus, congue at mattis mattis, blandit ac leo.

Vestibulum at elit cursus urna lacinia dapibus vel quis magna. Nullam nibh elit, congue eget imperdiet id, bibendum in risus. Suspendisse potenti. Donec nec orci ut ante luctus pharetra. Proin tristique, nibh at porttitor tristique, enim ante aliquam justo, nec feugiat leo dolor quis dui.

Proin quis enim neque, ut ultricies sapien. Cras risus eros, placerat eget pharetra ut, molestie sit amet metus. Ut tortor purus, molestie eget dictum eget, vestibulum sed nisi. Quisque posuere feugiat arcu at mattis. Nunc vehicula dui tortor, ut convallis odio.

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .myDiv {
        width: 300px;
        height: 300px;
        background-color: #93caff;
        border: 2px solid #696969;
        margin-bottom: 100px;
    }
</style>
<button onclick="overflow('overflow: visible;');">visible</button>
<button onclick="overflow('overflow: hidden;');">hidden</button>
<button onclick="overflow('overflow: scroll;');">scroll</button>
<button onclick="overflow('overflow: auto;');">auto</button>
<div class="myDiv" style="overflow: visible;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultricies est in dui aliquet vel dictum tellus sagittis. 
    Etiam fringilla laoreet tortor, ut dapibus ligula pharetra eget. Pellentesque faucibus 
    eleifend faucibus. Nam sapien lacus, congue at mattis mattis, blandit ac leo.</p>
    <p>Vestibulum at elit cursus urna lacinia dapibus vel quis magna. Nullam nibh elit, congue eget imperdiet id, bibendum in risus. 
    Suspendisse potenti. Donec nec orci ut ante luctus pharetra. Proin tristique, nibh at 
    porttitor tristique, enim ante aliquam justo, nec feugiat leo dolor quis dui.</p>
    <p>Proin quis enim neque, ut ultricies sapien. Cras risus eros, placerat eget pharetra ut, molestie sit amet metus. Ut tortor 
    purus,     molestie eget dictum eget, vestibulum sed nisi. Quisque posuere feugiat arcu 
    at mattis. Nunc vehicula dui tortor, ut convallis odio.</p>
</div>

VI-B. Positionnement▲

VI-B-1. Flottant | float▲

float : permet de définir le flottement d'une boîte à gauche, à droite ou pas du tout.

Syntaxe : none | left | right | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

left : l'élément flotte à gauche ;
right : l'élément flotte à droite ;
none : pas de flottement (par défaut).

Sélectionnez

float: none;
float: left;
float: right;

NONE

LEFT

RIGHT

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .float1 {
        width: 500px;
        height: 204px;
        border: 2px solid #696969;
        background-color: #93caff;
    }
 
    .float2 {
        width: 100px;
        height: 100px;
        float: none;
        border: 1px solid black;
        background-color: white;
    }
 
    .float3 {
        width: 100px;
        height: 100px;
        float: left;
        border: 1px solid black;
        background-color: yellow;
    }
 
    .float4 {
        width: 100px;
        height: 100px;
        float: right;
        border: 1px solid black;
        background-color: red;
    }
</style>
<div class="float1">
    <div class="float2">NONE</div>
    <div class="float3">LEFT</div>
    <div class="float4">RIGHT</div>
</div>

VI-B-2. Stopper un flottant | clear▲

clear : permet de définir si un élément doit être adjacent à un autre ou placé en dessous.

Syntaxe : none | left | right | both | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

left : l'élément est déplacé vers le bas pour se libérer des éléments flottants de gauche ;
right : l'élément est déplacé vers le bas pour se libérer des éléments flottants de droite ;
both : l'élément est déplacé vers le bas pour se libérer des éléments flottants de gauche comme de droite ;
none : l'élément ne se déplacera pas (par défaut).

Sélectionnez

clear: left;

Flottant à gauche

Flottant à gauche avec marge de 20 pixels

Flottant nettoyé

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .div1 {
        float: left;
        border: 1px solid #696969;
        background-color: white;
        height: 50px;
    }
 
    .div2 {
        float: left;
        border: 1px solid #696969;
        background-color: yellow;
        height: 50px;
        margin-left: 20px;
    }
 
    .clear1 {
        clear: left;
    }
</style>
<div style="border: 2px solid #696969; background-color: #93caff; width: 60%; padding: 10px;">
    <div class="div1">Flottant à gauche</div>
    <div class="div2">Flottant à gauche avec marge de 20 pixels</div>
    <div class="clear1">Flottant nettoyé</div>
</div>

VI-B-3. Type de positionnement | position▲

position : permet de définir le mode de positionnement d'un élément.

Syntaxe : absolute | fixed | relative | static | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 2.1

absolute : retire complètement l'élément du flux et le positionne par rapport à son plus proche ancêtre lui-même positionné (ou par défaut la fenêtre du navigateur) en fonction des propriétés top, right, bottom et left ;
fixed : position fixe. L'élément reste à sa position dans la fenêtre ;
relative : déplace l'élément par rapport à sa position dans le flux. Il n'est pas retiré du flux ;
static : positionnement normal (par défaut).

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .div_position {
        border: 2px solid #696969;
        background-color: #93caff;
        width: 60%;
        height: 400px;
    }
 
    .position {
        width: 100px;
        height: 100px;
        background-color: red;
        left: 10px;
        top: 100px;
    }
</style>
<button onclick="position('position: static;');">static</button>
<button onclick="position('position: fixed;');">fixed</button>
<button onclick="position('position: relative;');">relative</button>
<button onclick="position('position: absolute;');">absolute (sera placé tout en haut de la page)</button>
<div class="div_position">
    <div class="position" style="position: static;"></div>
</div>

VI-B-4. Position par rapport aux coins | top bottom left right▲

top - bottom - left - right : permettent de définir la position d'un élément. Valeurs en px, %, em... À utiliser pour un positionnement absolu, fixe ou relatif. Si la propriété position est à la valeur static, ces propriétés n'ont pas d'effet.

Syntaxe : <length> | <percentage> | auto | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 2.1

Sélectionnez

top: 30px;
left: 50px;
 
bottom: 10px;
right: 30px;

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .div_pos {
        position: relative;
        width: 60%;
        height: 400px;
        border: 2px solid #696969;
        background-color: #93caff;
    }
 
    .pos1 {
        position: absolute;
        width: 100px;
        height: 100px;
        top: 30px;
        left: 50px;
        border: 1px solid black;
        background-color: white;
    }
 
    .pos2 {
        position: absolute;
        width: 100px;
        height: 100px;
        bottom: 10px;
        right: 30px;
        border: 1px solid black;
        background-color: yellow;
    }
</style>
<div class="div_pos">
    <div class="pos1"></div>
    <div class="pos2"></div>
</div>

VI-B-5. Ordre d'affichage | z-index▲

z-index : permet, pour les éléments positionnés, de définir quel élément sera placé au-dessus de l'autre. Plus le nombre sera grand, plus il sera au premier plan.

Syntaxe : auto | <integer> | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Complément d'information : Comprendre z-index.

Version CSS : 2.1

Sélectionnez

z-index: 1;
z-index: 2;
z-index: 5;

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .div_index {
        width: 400px;
        height: 400px;
        border: 2px solid #696969;
        background-color: #93caff;
        position: relative;
    }
 
    .index1 {
        width: 150px;
        height: 150px;
        background-color: yellow;
        z-index: 1;
        top: 50px;
        left: 50px;
        position: absolute;
    }
 
    .index2 {
        width: 150px;
        height: 150px;
        background-color: red;
        z-index: 2;
        top: 80px;
        left: 80px;
        position: absolute;
    }
 
    .index3 {
        width: 150px;
        height: 150px;
        background-color: blue;
        z-index: 2;
        top: 120px;
        left: 120px;
        position: absolute;
    }
</style>
<div class="div_index">
    <div class="index1"></div>
    <div class="index2"></div>
    <div class="index3"></div>
</div>

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2013 Torgar. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.