mozilla
Vos résultats de recherche

    position

    Résumé

    La propriété CSS position choisit des règles alternatives pour le positionnement des éléments. Elle a été élaborée pour les effets d'animation scriptés.

    Un élément positionné est un élément dont la propriété de position calculée est relative, absolute, ou fixed.

    Un élément positionné en absolu est un élément dont la propriété de position calculée est absolute ou fixed.

    Les propriétés top, right, bottom et left spécifient la position des éléments positionnés.

    Syntaxe

    position: static;
    position: relative;
    position: absolute;
    position: fixed;
    position: sticky;
    
    position: inherit;
    

    Valeurs

    static
    Comportement normal (par défaut).
    relative
    Présente tous les éléments comme s'ils n'étaient pas positionnés puis ajuste la position de l'élément, sans modifier la présentation (et laisse ainsi un espace où l'élément aurait du être s'il n'avait pas été positionné).
    absolute
    Ne laisse pas d'espace pour l'élément. Au lieu de cela, le positionne à la position spécifiée relative à son plus proche ancêtre positionné ou au bloc contenant initial [Ndt: s'il est lui même positionné].
    fixed
    Ne laisse pas d'espace pour l'élément. Au lieu de cela, le positionne à la position spécifiée relative à la fenêtre d'affichage, ce qui empêche le défilement lorsque la page est parcourue (ou lors de l'impression, le positionne à cette position fixe pour chaque page ).
    sticky
    La position de la boîte est calculée en fonction des flux normaux (c'est-à-dire la position de dans le flux normal). Alors la boîte est décalée par rapport à la racine de son flux et le bloc contenant. Dans tous les cas, y compris avec les éléments table, n'affecte pas la position des boîtes subséquentes. Lorsqu'une boîte B est positionnée avec sticky, la position de la boîte suivante est calculée comme si B n'était pas décalée. L'effet de « position: sticky » sur les éléments table est le même que celui de «  position: relative ».

    Syntaxe formelle

    static | relative | absolute | fixed

    Exemples

    Positionnement relatif

    Afin de positionner les éléments à 20px du haut et du bas relativement à leur position normale, le CSS suivant est utilisé.

    #two { position: relative; top: 20px; left: 20px; }
    

    Remarquez que les autres éléments sont positionnés comme si « Two » était occupait l'espace prévu à sa position normale.

    Positionnement absolu

    Les éléments qui sont positionnés de manière relative sont considérés comme faisant partie du flux normal des éléments du document. A contrario, un élément qui est positionné de manière absolue est extirpé du flux et n'occupe donc plus d'espace pour le positionnement des autres éléments. Les éléments positionnés de manière absolue est positionné de manière relative à son ancêtre positionné le plus proche. Si aucun ancêtre positionné n'existe, le conteneur initial est utilisé.

    Dans l'exemple ci-dessous, le <div> parent (boîte « One ») est positionné de manière relative (et devient donc l'ancêtre positionné le plus proche) et la boîte « Two » est positionnée de manière absolue:

    #ancestor { position: relative; width: 500px; }
    #two { position: absolute; top: 20px; left: 20px; }
    

    Si #ancestor n'avait pas une position relative, la boîte Two apparaît de manière relative au coin supérieur gauche de la page.

    Positionnement fixe

    Le positionnement fixe est similaire au positionnement absolu, à l'exception que l'élément contenant le bloc est le viewport. Cela est souvent utilisé afin de créer un élément flotant qui garde la même position même après avoir fait déroulé la page. Dans l'exemple ci-dessus la boîte « One » est placée à 80px du haut de la page et à 20px de la gauche:

    #one { position: fixed; top: 80px; left: 20px; }
    

    Lorsque vous regardez le haut de la page, la boîte apparaît dans le coin supérieur gauche, et après avoir fait défiler la page, elle reste à une position identique vis-à-vis du viewport:

    fixed-1.png

    fixed-2.png

    Position sticky

    Le positionnement sticky est un hybride entre le positionnement relatif et fixe. L'élément est considéré comme positionné relativement jusqu'à ce qu'il croise un palier. Après ce point, il est considéré comme positionné de manière fixe. Voici un extrait de code CSS :

    #one { position: sticky; top: 10px; }
    

    Avec ce code, la boîte sera positionnée de manière relative jusqu'à ce que le viewport soit déroulé de manière à placer l'élément à moins de 10px du haut. Alors, l'élément sera fixé à 10px du haut jusqu'à ce que le viewport soit déroulé jusqu'à revenir avant ce palier.

    Le positionnement sticky est utilisé de manière courante pour les titres dans les listes alphabétiques. Le titre B sera visible en-dessous des éléments qui commencent par A jusqu'à ce qu'ils soient sortis de l'écran. Plutôt que de disparaître avec le reste du contenu, le titre B va rester fixe au-dessus des éléments débutant par B jusqu'à ce qu'ils soient tous sortis du viewport. Il se passera alors la même chose pour le titre C.

    Démonstration

    Il est nécessaire de définir un palier avec au moins une des propriétés top, right, bottom ou left pour que le positionnement sticky se comporte tel que prévu. Sinon, il sera impossible de la distinguer d'un positionnement relatif.

    Notes

    Pour les éléments en position relative, les propriétés top ou bottom spécifient le décalage vertical depuis la position normale et les propriétés left ou right spécifient le décalage horizontal.

    Pour les éléments en position absolue, les propriétés top, right, bottom et left spécifient les décalages depuis le bord du bloc ancêtre positionné contenant l'élément (à partir duquel l'élément est positionné relativement). La marge de l'élément est alors positionnée à l'intérieur de ces décalages.

    La plupart du temps, les éléments positionnés en absolu ont une valeur auto pour height et width calculée pour ajuster le contenu de l'élément. Cependant, des éléments non remplacés positionnés en absolu peut être conduits à remplir l'espace disponible en spécifiant (avec une valeur autre que auto) top et bottom et en laissant height non défini (donc valeur auto). Idem pour left, right et width.

    Sauf pour les cas, juste décrits ci-dessus, des éléments positionnés en absolu remplissant l'espace disponible:

    • Si top et bottom sont toutes deux spécifiées (techniquement, différentes de auto), top prédomine.
    • Si left et right sont toutes deux spécifiées, left prédomine lorsque la direction est ltr (Left To Right : de gauche à droite, français, anglais, aponais horizontal, etc) et right prédomine lorsque la direction est rtl (Right To Left : de droite à gauche, arabe, hébreu, etc).

    Spécifications

    Spécification Statut Commentaire
    CSS Level 2 (Revision 1)
    La définition de 'position' dans cette spécification.
    Recommendation  
    CSS Positioned Layout Module Level 3
    La définition de 'position' dans cette spécification.
    Version de travail Ajoute la valeur de propriété sticky

    Compatibilité des navigateurs

    Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Support de base 1.0 1.0 (1.0) [1] 4.0 [3] 4.0 1.0 (85)
    Valeur fixed 1.0 1.0 (1.0) 7.0 4.0 1.0 (85)
    Valeur sticky ? 32 (32.0)bug 916315 [2] ? ? 6.1 -webkit-
    Fonction Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Support de base ? 1.0 (1.0) [1] ? ? iOS 6.1 -webkit-

    [1] Deuis Firefox 30, Gecko accepte les éléments <tr>, <thead>, et <tfoot> avec un style position: relative; à se comporter comme des conteneurs positionnés de manière absolue. Ceci signifie qu'un élément avec un style position: absolute; dans un tableau peut être positionné de manière relative à ces éléments. Dans d'autres navigateurs et dans les versions précédentes de Firefox, définir position: relative; sur une ligne ou un groupe de lignes n'a pas d'effet. Firefox aide les développeur à faire la transition vers le nouveau comportement et détecte des problèmes de rendus qui peuvent apparaître sur leurs sites en imprimant un avertissement dans la console JavaScript si vous utilisez cette fonction:

    Relative positioning of table rows and row groups is now supported. This site may need to be updated because it may depend on this feature having no effect.

    Soit en français:

    Le positionnement relatif des lignes et des groupes de lignes est désormais possible. Ce site a peut-être besoin d'être mis à jour car son bon fonctionnement dépend peut-etre du fait que cette fonction n'avait pas d'effet.

    [2 ] Le positionnement sticky ne fonctionne dans Firefox 26 à Firefox 31, inclus, que seulement si la préférence layout.css.sticky.enabled dans about:config est à true. Des versions Firefox 27 à 31, c'était la valeur par défaut des versions Nightly et Aurora du navigateur.

    [3] Dans Internet Explorer, le positionnement fixe ne fonctionne que si le document est en quirks mode.

    Voir également

    Étiquettes et contributeurs liés au document

    Étiquettes : 
    Contributors to this page: FredB, Fredchat, Kyodev, teoli, Mgjbot
    Dernière mise à jour par : FredB,