Vlad Merjevitch

Le positionnement est la position d'un élément dans un système de coordonnées. Il existe quatre types de positionnement : normal, absolu, fixe et relatif. En fonction du type défini via la propriété position, le système de coordonnées change également.

Grâce à la combinaison des propriétés position , left , top , right et bottom , un élément peut être superposé les uns aux autres, affiché en un point avec certaines coordonnées, fixé à un emplacement spécifié, déterminé la position d'un élément par rapport à un autre, etc. Semblable aux autres Propriétés CSS Le contrôle du positionnement est disponible via des scripts. Ainsi, vous pouvez modifier dynamiquement la position des éléments sans recharger la page, en créant des animations et divers effets.

Positionnement normal

Si la propriété position d'un élément n'est pas définie ou si sa valeur est static , l'élément est rendu normalement dans le flux de documents. En d'autres termes, les éléments sont affichés sur la page dans l'ordre dans lequel ils apparaissent code source HTML.

Les propriétés left , top , right , bottom, si elles sont définies, sont ignorées.

Positionnement absolu

Avec un positionnement absolu, l'élément n'existe pas dans le flux documentaire et sa position est définie par rapport aux bords du navigateur. Vous pouvez définir ce type via la valeur absolue de la propriété position. Les coordonnées sont spécifiées par rapport aux bords de la fenêtre du navigateur, appelées « zone visible » (Fig. 3.42).

Riz. 3.42. Valeurs de propriété gauche, droite, haut et bas pour un positionnement absolu

Le mode est caractérisé par les caractéristiques suivantes.

• La largeur du calque, sauf indication contraire explicite, est égale à la largeur du contenu plus les valeurs de marge, de bordure et de remplissage.
• Un calque ne change pas sa position d'origine à moins qu'il ne possède les propriétés right , left , top et bottom .
• Les propriétés left et top ont priorité sur les propriétés right et bottom. Si gauche et droite se contredisent, alors la valeur de droite est ignorée. Il en va de même pour le bas.
• Si left est défini sur une valeur négative, le calque dépassera le bord gauche du navigateur et la barre de défilement n'apparaîtra pas. C'est une façon de cacher un élément à la vue. La même chose s'applique à la propriété top, seul le calque dépassera le bord supérieur.
• Si laissé, définissez la valeur plus de largeur zone visible ou spécifiez droite avec une valeur négative, la bande horizontale faire défiler. Une règle similaire fonctionne avec top , mais nous en reparlerons bande verticale faire défiler.
• Dans le même temps, les propriétés gauche et droite spécifiées forment la largeur du calque, mais uniquement si la largeur n'est pas spécifiée. Une fois que vous avez ajouté la propriété width, la bonne valeur sera ignorée. La même chose se produira avec la hauteur du calque, seules les propriétés top , bottom et height sont impliquées.
• Un élément en position absolue se déplace avec le document lors de son défilement.

La propriété position, définie sur absolue, peut être utilisée pour créer un effet de cadre. En plus du positionnement absolu des éléments, vous devez attribuer la propriété overflow avec la valeur auto . Ensuite, lorsque le contenu dépasse la hauteur de la zone visible, une barre de défilement apparaîtra. La hauteur et la largeur des « frames » sont générées automatiquement en utilisant simultanément les propriétés left , right pour la largeur et top , bottom pour la hauteur (exemple 3.31).

Exemple 3.31. Créer un analogue de cadres

Corps de positionnement absolu (marge : 0 ; ) #sidebar, #content ( position : absolue; ) #sidebar, #content ( overflow : auto ; padding : 10px; ) #header ( height : 80px; /* Hauteur du calque */ background : #FEDFC0 ; bordure inférieure : 2 px solide #7B5427 ; ) #en-tête h1 ( remplissage : 20 px ; marge : 0 ; ) #sidebar ( largeur : 150 px ; arrière-plan : # ECF5E4 ; bordure droite : 1 px solide # 231F20 ; haut : 82 px ; /* Distance depuis le bord supérieur */ bas : 0; /* Distance depuis le bas */ ) #content ( top : 82px; /* Distance depuis le bord supérieur */ gauche : 170px; /* Distance depuis le bord gauche */ en bas : 0 ; à droite : 0 ; ) Pilaf des peuples du monde

Pilaf à la Fergana

Pilaf ouzbek

Pilaf sibérien

Pilaf italien

Pilaf estonien

Pilaf à l'américaine

Pilaf à l'indienne

Pilaf à la Fergana

Placez la viande coupée en morceaux dans un chaudron et faites-la revenir jusqu'à ce qu'une croûte se forme. Faites revenir l'oignon coupé en rondelles avec la viande jusqu'à ce qu'elle soit rougeâtre, puis ajoutez les carottes coupées en lanières. Ajoutez la moitié du sel, mélangez le tout et faites revenir jusqu'à ce que les carottes soient dorées. Après cela, versez la moitié quantité requise l'eau et laissez bouillir.

Couvrir le riz d'une couche uniforme, augmenter le feu et verser immédiatement de l'eau pour qu'elle recouvre le riz de 1 à 1,5 cm. Dès que l'eau s'est évaporée, à l'aide d'une écumoire, récupérez le pilaf en tas vers le milieu. , percez-le avec un bâton à plusieurs endroits pour que l'eau, en surface, aille au fond. Couvrez ensuite le pilaf et laissez-le reposer 20 à 25 minutes.

Mélangez soigneusement le pilaf fini, transférez-le dans un grand plat et placez la viande dessus.

Résultat cet exemple montré sur la fig. 3.43. La couche d'en-tête est rendue dans le flux comme d'habitude, et les couches de barre latérale et de contenu sont positionnées de manière absolue.

Riz. 3.43. Application du positionnement absolu

Dans IE6, les éléments positionnés de manière absolue ne peuvent pas avoir simultanément les propriétés left , right et top , bottom .

Le positionnement absolu est également utilisé pour créer divers effets, par exemple, des info-bulles pour les photos. Contrairement à attribut de titreétiqueter qui affiche également le texte de l'info-bulle, grâce aux styles, vous pouvez contrôler le type de texte affiché à l'aide du script.

Tout d'abord, créons un calque vide avec l'identifiant floatTip et définissons son style. Trois propriétés de style doivent être requises : position avec une valeur absolue , display avec une valeur none masque le calque et width définit la largeur du calque avec une info-bulle. Les propriétés restantes sont utilisées à la demande du développeur et sont destinées à modifier la conception de la couche (exemple 3.32).

Exemple 3.32. Style d'info-bulle

#floatTip ( position : absolue ; /* Positionnement absolu */ largeur : 250px ; /* Largeur du bloc */ affichage : aucun ; /* Masquage de l'affichage */ bordure : 1px solide #000 ; /* Paramètres du cadre */ remplissage : 5px ; /* Marges autour du texte */ font-family: sans-serif; /* Police Serif */ font-size: 9pt; /* Taille de la police */ couleur: #333; /* Couleur du texte */ arrière-plan: #ECF5E4; /* Couleur de l'arrière plan */ )

Le script lui-même se compose de deux fonctions - moveTip() suit le mouvement de la souris et modifie la position du calque en fonction des coordonnées du curseur, et toolTip() contrôle la visibilité du calque et y affiche le texte souhaité (exemple 3.33).

Exemple 3.33. Script de sortie de couche

Document.onmousemove = moveTip; function moveTip(e) ( floatTipStyle = document.getElementById("floatTip").style; w = 250; // Largeur du calque // Pour le navigateur IE if (document.all) ( x = event.x + document.body.scrollLeft ; y = event.y + document.body.scrollTop; // Pour les autres navigateurs ) else ( x = e.pageX; // Coordonnée X du curseur y = e.pageY; // Coordonnée Y du curseur ) // Afficher le calque à droite du curseur si ((x + w + 10)< document.body.clientWidth) { floatTipStyle.left = x + "px"; // Показывать слой слева от курсора } else { floatTipStyle.left = x - w + "px"; } // Положение от верхнего края окна браузера floatTipStyle.top = y + 20 + "px"; } function toolTip(msg) { floatTipStyle = document.getElementById("floatTip").style; if (msg) { // Выводим текст подсказки document.getElementById("floatTip").innerHTML = msg; floatTipStyle.display = "block"; // Показываем слой } else { floatTipStyle.display = "none"; // Прячем слой } }

Pour plus de commodité et de polyvalence, le script doit être placé dans fichier séparé et connectez-le via l'attribut src de la balise. Le code final est présenté dans l'exemple 3.34.

Exemple 3.34. Création d'une info-bulle

Info-bulle #floatTip ( position : absolue ; largeur : 250 px ; affichage : aucun ; bordure : 1 px solide #000 ; remplissage : 5 px ; famille de polices : sans-serif ; taille de police : 9 pts ; couleur : #333 ; arrière-plan : # ECF5E4 ; opacité : 0,85 ; /* Transparence du calque */ )

" + " Objectif : Canon EF 24-105 f/4L IS USM
" + "Flash : Canon Speedlite 580 EX
" + "Vitesse d'obturation : 1/125
Ouverture : 5,6")" onmouseout="toolTip()" />

Le résultat de cet exemple est présenté sur la Fig. 3.44. Veuillez noter que le retour à la ligne du texte lors de l'appel de la fonction toolTip() est effectué à des fins de lisibilité et est dans la syntaxe JavaScript. DANS Script Safari parfois, cela ne fonctionne pas lors du retour à la ligne du texte, auquel cas le texte doit être écrit sur une seule ligne. Une propriété d'opacité CSS3 a été ajoutée aux styles, ce qui ajoute une légère transparence au calque. Cette propriété n'est pas prise en charge dans IE antérieur à la version 9.0.

Riz. 3.44. Info-bulle rendue à l'aide de JavaScript

Emploi stable

La position fixe d'un calque est spécifiée par la valeur fixe de la propriété position et a un effet similaire au positionnement absolu. Mais contrairement à lui, il se lie au point de l'écran spécifié par les propriétés left , top , right et bottom et ne change pas de position lors du défilement de la page Web. Une autre différence par rapport à l'absolu est que lorsqu'un calque fixe dépasse la zone visible à droite ou en dessous, aucune barre de défilement n'apparaît.

Ce type de positionnement permet de créer des menus, des onglets, des en-têtes, en général tout élément qui doit être fixé sur la page et toujours visible par le visiteur. L'exemple 3.35 montre l'ajout d'un pied de page qui reste au même endroit quelle que soit la quantité d'informations sur le site.

Exemple 3.35. Sous-sol Fixe

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Pied de page fixe BODY ( marge inférieure : 50 px ; ) #footer ( position : fixe ; /* Position fixe */ gauche : 0 ; bas : 0 ; /* Coin inférieur gauche */ remplissage : 10 px ; /* Marges autour du texte */ fond : #39b54a ; /* Couleur de fond */ couleur : #fff ; /* Couleur du texte */ largeur : 100 % ; /* Largeur du calque */ ) Toutes les méthodes de capture de lions répertoriées sur le site sont théoriques et basées sur des méthodes informatiques. L'auteur ne garantit pas votre sécurité lors de leur utilisation et décline toute responsabilité quant aux résultats. N'oubliez pas qu'un lion est un prédateur et un animal dangereux ! Vlad Merjevitch

Le résultat de l'exemple est présenté sur la Fig. 3.45. Parce que le sous-sol fixe superpose le texte et le cache, ajoute un remplissage en bas pour le sélecteur BODY. IE6 ne prend pas en charge la valeur fixe, donc cet exemple ne fonctionnera pas correctement ici.

Riz. 3.45. Pied de page en bas de page

Positionnement relatif

Définir la propriété position sur relatif définit la position de l'élément par rapport à sa position d'origine. L'ajout des propriétés left , top , right et bottom modifie la position de l'élément et le déplace d'un côté ou de l'autre par rapport à son emplacement d'origine. Une valeur gauche positive spécifie un décalage vers la droite depuis la bordure gauche de l'élément, une valeur négative spécifie un décalage vers la gauche. Une valeur positive de top spécifie un déplacement vers le bas de l'élément (Fig. 3.46), une valeur négative spécifie un déplacement vers le haut.

Riz. 3.46. Valeurs de propriété gauche et supérieure pour le positionnement relatif

Les propriétés du bas et de droite ont l’effet inverse. Avec une valeur positive, la droite déplace l'élément vers la gauche de son bord droit, avec une valeur négative, elle le déplace vers la droite (Fig. 3.47). Une valeur inférieure positive fait monter l'élément, une valeur inférieure négative le fait descendre.

Riz. 3.47. Valeurs de propriété à droite et en bas pour le positionnement relatif

Le positionnement relatif se caractérise par les caractéristiques suivantes.

• Ce type de positionnement ne s'applique pas aux éléments de tableau tels que les cellules, les lignes, les colonnes, etc.
• Lorsqu'un élément est déplacé par rapport à position de départ, l'espace occupé par l'élément reste vide et n'est pas rempli par les éléments en dessous ou au dessus de lui.

L'exemple 3.36 montre le texte du titre descendant pour lui donner un style d'écriture différent.

Exemple 3.36. Titre du texte

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Titre H1 ( police : gras 2em Arial, Tahome, sans-serif ; /* Options de police */ couleur : #fff ; arrière-plan : #375D4C ; remplissage : 0 10px ; ) H1 SPAN ( position : relative ; /* Positionnement relatif */ haut : 0,3em ; /* Descendre */ ) Az et les hêtres de la science des polices

Une police est un moyen d’exprimer un design, pas une sorte de lecture banale.

Le résultat de cet exemple est présenté sur la Fig. 3.48.

Riz. 3.48. Décaler le texte par rapport à sa position d'origine

Calques imbriqués

Généralement positionnement relatif en soi, il n'est pas souvent utilisé, car il existe un certain nombre de propriétés qui remplissent essentiellement le même rôle, par exemple la même marge . Mais la combinaison différents types Le positionnement des calques imbriqués est l’une des techniques de mise en page pratiques et pratiques. Si vous définissez relatif pour l'élément parent et absolu pour l'élément enfant, alors le système de coordonnées change et la position de l'élément enfant est indiquée par rapport à son parent (Fig. 3.49).

Riz. 3.49. Valeurs de propriété gauche, droite, haut et bas dans les calques imbriqués

Les coordonnées sont comptées à partir du bord intérieur de la bordure ; les valeurs des champs ne sont pas prises en compte. L'exemple suivant place le texte dans le coin inférieur droit du calque, près de la bordure, en ignorant la propriété padding.

Texte