mozilla
Vos résultats de recherche

    top

    Résumé

    La propriété CSS top spécifie une partie de la position des éléments positionnés. Elle n'a pas d'effet sur les éléments non-positionnés.

    Pour les éléments positionnés de manière absolue (ceux avec position: absolute ou position: fixed), elle spécifie la distance entre le bord de la marge supérieure de l'élément et le bord supérieur du bloc contenant.

    Pour les éléments positionnés de manière relative (ceux avec position: relative), elle spécifie la quantité dont l'élément est déplacé en dessous de sa position normale.

    Lorsqu'à la fois top et bottom sont spécifiés, la valeur de top est privilégiée et la valeur calculée de bottom est fixée à -top.

    • Valeur initiale auto
    • S'applique à positioned elements
    • Héritée non
    • Pourcentages se rapporte à la hauteur du bloc contenant
    • Média visual
    • Valeur calculée si spécifié par une longueur, la valeur absolue correspondante; si spécifié par un pourcentage, la valeur telle que spécifiée; sinon, auto
    • Animable oui, comme une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
    • Ordre canonique l'ordre unique et non-ambigu défini par la grammaire formelle

    Syntaxe

       top: <longueur> | <pourcentage> | auto | inherit
    

    Exemples

     /* L'élément body pourrait être défini en utilisant l'unité px pour que le div fonctionne aussi */
     body{
       width: 100%;
       height: 100%;
     }
     /* Le div peut utiliser un pourcentage (la hauteur et la largeur de body sont définis) */
     div{
       position:absolute;
       left:15%;
       top:30%;
       bottom:30%;
       width:70%;
       height:40%;
       text-align:left;
       border: 3px rgb(0,0,0) solid;
     }
    
     <?xml version="1.0" encoding="utf-8"?>
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
               "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
       <head>
         <meta http-equiv="Content-Type" content="application/xhtml+xml" />
         <title>Mozilla.org height top left width percentage CSS</title>
         <style type="text/css">
           /* L'élément body pourrait être défini en utilisant l'unité px pour que le div fonctionne aussi */
           body{
             width: 100%;
             height: 100%;
           }
           /* Le div peut utiliser un pourcentage (la hauteur et la largeur de body sont définis */
           div{
             position:absolute;
             left:15%;
             top:30%;
             bottom:30%;
             width:70%;
             height:40%;
             text-align:left;
             border: 3px rgb(0,0,0) solid;
           }
         </style>
       </head>
       <body>
          <center>
            <div>
                 ...Du contenu...
            </div>
          </center>
    
       </body>
     </html>
    

    Spécifications

    Specification Statut Commentaire
    CSS Transitions Working Draft Définit top comme animable.
    CSS Level 2 (Revision 1) Recommendation Spécification initiale

    Compatibilité des navigateurs

    Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Support de base (Oui) 1.0 (1.7 ou moins) (Oui) (Oui) (Oui)
    Fonction Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Support de base ? ? ? ? ? ?

    Voir également

    Étiquettes et contributeurs liés au document

    Contributors to this page: teoli, FredB, DavidWalsh, ethertank
    Dernière mise à jour par : teoli,
    Masquer la barre latérale