Propriétés de positionnement des feuilles de style en cascade (CSS)

Les attributs de CSS de positionnement sont utilisés principalement pour des couches de style en utilisant le

tag, mais vous pouvez également les utiliser pour le style de la position d'une image, un conteneur ou élément de niveau bloc dans le navigateur. Pour les couches, les deux le contenu ainsi que le conteneur peuvent être décorés avec des attributs dans cette catégorie.

position: Détermine comment un élément de style doit être placé dans une fenêtre de navigateur. Indiquez si la position est absolu, fixé, relatif, ou statique.

#footer {position: relative-}

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

• absolu: Définit la position de l'élément absolument sur la base des valeurs numériques entrées pour l'élément de la mise en place par rapport au bord supérieur gauche de la fenêtre du navigateur, ou à l'élément parent le plus proche positionné absolue ou relative.

• fixé: Réglage de la position de l'élément tout à fait sur la base des valeurs numériques entrées pour de l'élément de placement par rapport au bord supérieur gauche de la fenêtre du navigateur.

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

• statique: Définit l'élément dans un emplacement exact dans le flux de texte.

largeur: Utiliser cet attribut pour définir la largeur d'un élément, comme une couche ou un autre récipient, en utilisant px, pt, dans, cm, mm, ordinateur personnel, em, ex, %, ou auto.

# layer1 {width: 760px;}

hauteur: Utiliser cet attribut pour définir la hauteur d'un élément, comme une couche, en utilisant px, pt, dans, cm, mm, ordinateur personnel, em, ex, %, ou auto.

# layer1 {height: 100px;}

visibilité: Cet attribut détermine la valeur initiale de la visibilité d'un élément, qui peut être réglé à caché, hériter, ou visible, lorsque la page se ouvre dans une fenêtre de navigateur.

# layer1 {visibility: hidden-}

Visibilité ne doit pas être confondu avec le afficher attribut, qui détermine si un élément doit être traité comme un bloc ou un élément en ligne ou être complètement ignoré par le navigateur avec la display: none; attribuer. Grâce à la visibilité, vous faites affaire avec l'état de visibilité initiale d'un élément, comme une couche, lorsque la première page charge dans le navigateur.

Cet attribut peut également être activé et désactivé en utilisant javascript afin de masquer et d'afficher les éléments sur la page, prêtant ainsi un peu plus d'interactivité à la page pour le visiteur.

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

• caché: Cette option cache une couche d'afficher quand une page ouvre initialement dans un navigateur.

• hériter: Cette option provoque toute couche d'hériter de la visibilité d'une couche- parent si ne existe pas un parent, la couche sera visible. Lorsque la visibilité est indéterminée, hériter est l'attribut par défaut.

• visible: Choisissez cette option pour forcer la couche d'être visible, quel que soit le paramètre de visibilité de tout parent couche, lorsque la page se ouvre dans une fenêtre de navigateur.

z-index: Cet attribut spécifie l'ordre d'empilement relative d'une couche à d'autres couches sur la page comme ils sont affichés dans un navigateur.

Réglez le z-index à auto lorsque le nombre est non critique, réglez-le hériter pour faire la couche hériter de la valeur de z-index d'un parent couche, ou entrer un nombre positif ou négatif spécifique, comme 1, 15, ou 100, lorsque le nombre est important par rapport aux autres couches de la page.

Plus le nombre, plus la couche apparaît à l'avant ou le haut de la page la plus proche du visitor- plus le nombre, plus la couche apparaît à l'arrière-plan du navigateur.

#lastchance {z-index: 4-}

L'illustration montre un exemple de plusieurs couches sur une page avec différents z-index des valeurs.

débordement: Le réglage de débordement peut être utilisé pour spécifier ce qui arrive à tout le contenu d'une couche qui dépasse la taille de la couche tel que défini dans le CSS. Par exemple, si une couche est 200px par 200px en taille, mais contient une pleine page de texte, le réglage de débordement détermine comment le texte sera de remplir la couche. Met le débordement attribuer à auto, caché, volute, ou visible.

#aboutus {overflow: scroll-}

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

• auto: Choisissez cette option pour ajouter automatiquement le navigateur barres de défilement pour la couche si et seulement si le contenu dépasse la largeur et la hauteur définie de la couche.

• caché: Lorsque cette option est sélectionnée, la taille d'une couche est maintenue et tout contenu excédant cette taille est coupé ou coupé à la vue dans une fenêtre de navigateur.

• volute: Choisissez volute d'ajouter des barres de défilement à la couche, indépendamment de savoir si le contenu correspond ou dépasse la largeur et la hauteur de la couche. Cet attribut est pas uniformément soutenu par tous les navigateurs, alors assurez-vous de le tester avant de le publier.

• visible: Choisissez cette option pour que la couche d'élargir verticalement et horizontalement, puis, si nécessaire, adaptées à tous les contenus qui dépassent la largeur de la couche spécifiée et la hauteur de sorte que tous les contenus sont visibles.

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

Par défaut, la taille du pixel et le placement d'un élément sont spécifiés pour le haut, gauche, bas, droite et bords. Cependant, vous pouvez utiliser d'autres unités (y compris pt, dans, cm, mm, ordinateur personnel, em, ex, ou %) Si on le désire ou définir la valeur pour l'une des parties à auto. Pour les couches, si le contenu au sein de cette couche dépassent la taille spécifiée, la couche se développe pour correspondre au contenu.

#specialitems {gauche: 500px; top: 300px; droite: 0-bottom: 0-}

agrafe: Utiliser cet attribut pour spécifier une zone rectangulaire visible plus petite dans une couche par rapport au bord supérieur gauche de cette couche. Lorsque coupé, la zone cachée peut être manipulé avec javascript ou une autre programmation pour créer des effets spéciaux qui peuvent masquer ou afficher le contenu caché.

Définissez les valeurs de la zone rasée vers le haut, gauche, droite, et les bords inférieurs de la couche à l'aide px (pixels), ordinateur personnel (pica), pt (points), dans (pouces), mm (millimètres), cm (centimètres) em (EMS), ex (EX), ou % (en pourcentage), ou une valeur de auto.

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