Positionnement Propriétés des feuilles de style en cascade (CSS) - tabs

Les attributs de positionnement de CSS sont principalement utilisés pour le style des calques utilisant la balise, mais vous pouvez également les utiliser pour définir la position d'une image, d'un conteneur ou d'un élément de niveau bloc. le navigateur. Pour les calques, le contenu ainsi que le conteneur peuvent être dotés d'attributs dans cette catégorie.

position: Détermine comment un élément stylé doit être positionné dans une fenêtre de navigateur. Indiquez si la position est absolue, fixe, relative ou statique.

#footer {position: relative;}

Lors du réglage de la position, utilisez l'une des valeurs de style suivantes:

• absolute: Définit la position de l'élément en fonction des valeurs numériques saisies pour le placement de l'élément par rapport au bord supérieur gauche de la fenêtre du navigateur ou à l'élément parent le plus proche ou le plus proche.

• fixed: Définit la position de l'élément en fonction des valeurs numériques saisies pour le placement de l'élément par rapport au bord supérieur gauche de la fenêtre du navigateur.

• relative: définit la position de l'élément par les valeurs numériques entrées pour le placement de l'objet par rapport à la position de l'élément stylisé dans le flux de texte du fichier.

• static: définit l'élément à un emplacement précis dans le flux de texte.

width: utilisez cet attribut pour définir la largeur d'un élément, tel qu'un calque ou un autre conteneur, en utilisant px, pt, in, cm, mm, pc, em, ex,% ou auto.

# layer1 {width: 760px;}

height: Utilisez cet attribut pour définir la hauteur d'un élément, tel qu'un calque, en utilisant px, pt, in, cm, mm, pc, em, ex,% ou auto.

# layer1 {height: 100px;}

visibility: cet attribut détermine la valeur de visibilité initiale d'un élément, qui peut être masquée, héritée ou visible lorsque la page s'ouvre pour la première fois dans une fenêtre de navigateur.

# layer1 {visibility: hidden;}

La visibilité ne doit pas être confondue avec l'attribut display, qui détermine si un élément doit être traité comme un bloc ou un élément inline ou complètement ignoré par le navigateur avec l'affichage: aucun; attribut. Avec la visibilité, vous devez gérer l'état de visibilité initiale d'un élément, tel qu'un calque, lors du premier chargement de la page dans le navigateur.

Cet attribut peut également être activé ou désactivé en utilisant JavaScript pour masquer et afficher les éléments sur la page, ce qui confère un peu d'interactivité à la page pour le visiteur.

Pour modifier la visibilité de votre élément, ajoutez la propriété visibility à votre sélecteur CSS avec l'une des valeurs suivantes:

• hidden: cette option masque l'affichage d'une couche lors de l'ouverture initiale d'une page dans un navigateur.

• inherit: cette option permet à n'importe quelle couche d'hériter de la visibilité d'un calque parent; Si un parent n'existe pas, la couche sera visible. Lorsque la visibilité n'est pas spécifiée, inherit est l'attribut par défaut.

• visible: choisissez cette option pour forcer la visibilité de la couche, quel que soit le paramètre de visibilité de la couche parente, lorsque la page s'ouvre pour la première fois dans une fenêtre de navigateur.

z-index: cet attribut spécifie l'ordre d'empilement d'une couche par rapport aux autres couches de la page telles qu'elles sont affichées dans un navigateur.

Définissez l'index z sur auto lorsque le nombre est non critique, définissez-le sur inherit pour que la couche hérite de la valeur z-index d'un calque parent ou entrez un nombre positif ou négatif spécifique, tel que 1, 15 ou 100, lorsque le nombre est important par rapport aux autres couches de la page.

Plus le nombre est élevé, plus le calque apparaît près du haut ou du haut de la page le plus proche du visiteur; plus le nombre est petit, plus la couche apparaît proche de l'arrière-plan du navigateur.

#lastchance {z-index: 4;}

L'illustration montre un exemple de plusieurs couches sur une page avec des valeurs d'index z différentes. Débordement

: le paramètre de débordement peut être utilisé pour spécifier ce qu'il advient de tout contenu d'une couche qui dépasse la taille de la couche définie dans la feuille de style CSS. Par exemple, si un calque a une taille de 200 x 200 pixels mais contient une page de texte complète, le paramètre de débordement détermine la manière dont le texte va remplir le calque. Définissez l'attribut overflow sur auto, hidden, scroll ou visible.

#aboutus {overflow: scroll;}

Voici une description de chacune des valeurs de débordement que vous pouvez utiliser:

• auto: Choisissez cette option pour que le navigateur ajoute automatiquement des barres de défilement à la couche si et seulement si le contenu dépasse la largeur et la hauteur définies du calque.

• masqué: lorsque cette option est sélectionnée, la taille d'une couche est conservée et tout contenu dépassant cette taille est tronqué ou découpé dans une fenêtre de navigateur.

• défilement: choisissez de faire défiler pour ajouter des barres de défilement au calque, que le contenu s'ajuste ou dépasse la largeur et la hauteur du calque. Cet attribut n'est pas uniformément supporté par tous les navigateurs, alors assurez-vous de le tester avant de publier.

• visible: choisissez cette option pour que le calque se développe verticalement puis horizontalement, si nécessaire, afin de s'adapter à tout contenu dépassant la largeur et la hauteur du calque spécifiées, de sorte que tout le contenu soit visible.

Placement (gauche, haut, droite, bas): utilisez l'attribut placement pour spécifier la taille et l'emplacement exacts (en fonction du type spécifié) d'un élément stylisé dans une fenêtre de navigateur.

Par défaut, la taille de pixel et le placement d'un élément sont spécifiés pour les bords supérieur, gauche, inférieur et droit. Cependant, vous pouvez utiliser d'autres unités (y compris pt, in, cm, mm, pc, em, ex ou%) si vous le souhaitez ou définir la valeur de l'un des côtés sur auto. Pour les calques, si le contenu de cette couche dépasse la taille spécifiée, la couche se développe pour s'adapter au contenu.

#specialitems {left: 500px; haut: 300px; droite: 0; bottom: 0;}

clip: utilisez cet attribut pour spécifier une plus petite zone rectangulaire visible dans un calque par rapport au bord supérieur gauche de ce calque.Une fois écrêtée, la zone cachée peut être manipulée avec JavaScript ou une autre programmation pour créer des effets spéciaux qui peuvent masquer et afficher le contenu caché.

Définissez les valeurs de la zone découpée sur les bords supérieur, gauche, droit et inférieur de la couche en utilisant px (pixels), pc (picas), pt (points), en (pouces), mm (millimètres), cm (centimètres), em (ems), ex (exs), ou% (pourcentage), ou une valeur de auto.

#bunnygame {clip: rect (10px, 100px, 0px, 60px);}