L’un des avantages du CSS est que les styles nous donnent la possibilité de positionner le contenu et les éléments sur une page de presque toutes les manières imaginables. Cela ajoute de la structure à notre conception et contribue à rendre le contenu plus visuel.

Il y en a plusieurs différents types positionnement en CSS, chacun de ces types a sa propre portée. Dans ce chapitre, nous allons examiner quelques cas d'utilisation différents (création de mises en page réutilisables et positionnement unique d'éléments jetables), ainsi que décrire quelques méthodes pour ce faire.

Positionnement via flotteur

Une façon de positionner des éléments sur une page consiste à utiliser la propriété float. Cette propriété est assez polyvalente et peut être utilisée de différentes manières.

Essentiellement, la propriété float prend un élément, le supprime du flux normal de la page et le positionne à gauche ou à droite de élément parent. Tous les autres éléments de la page s'enrouleront autour d'un tel élément. Par exemple, les paragraphes s'enrouleront autour d'une image si l'élément La propriété float est définie.

Lorsque la propriété float est appliquée à plusieurs éléments à la fois, elle permet de créer une mise en page avec des éléments flottants côte à côte ou en face les uns des autres, comme indiqué dans une mise en page multi-colonnes.

La propriété float prend plusieurs valeurs, les deux plus populaires étant left et right, qui permettent à l'élément de flotter à gauche ou à droite de son parent.

Img (flottant : gauche ; )

flotter en pratique

Créons une mise en page générale avec un en-tête en haut, deux colonnes au centre et un pied de page en bas. Idéalement, cette page devrait être balisée à l'aide des éléments , et, comme décrit dans la Leçon 2, Comprendre le HTML. À l'intérieur d'un élément, le code HTML pourrait ressembler à ceci :

... ... ... ...

Démonstration d'une mise en page sans float

Ici, les éléments sont au niveau des blocs, ils sont donc empilés les uns sur les autres par défaut. Cependant, nous souhaitons que ces éléments soient côte à côte. En réglant float à gauche et à droite pour float, nous pouvons les positionner comme deux colonnes opposées l'une à l'autre. Notre CSS devrait ressembler à ceci :

Section ( float: gauche; ) de côté ( float: right; )

Pour référence, les éléments flottants sont positionnés le long du bord de l'élément parent. S'il n'y a pas de parent, l'élément flottant sera positionné le long du bord de la page.

Lorsque nous définissons un élément comme flottant, nous le supprimons du flux normal du document HTML. Cela fait que la largeur par défaut de cet élément devient la largeur de son contenu. Parfois, par exemple lorsque nous créons des colonnes pour une mise en page réutilisable, ce comportement n'est pas souhaitable. Cela peut être corrigé en ajoutant une propriété width avec une valeur fixe pour chaque colonne. De plus, pour empêcher les éléments flottants de se toucher, provoquant ainsi le placement du contenu d'un élément à côté d'un autre, nous pouvons utiliser la propriété margin pour définir l'espace entre les éléments.

Ci-dessous, nous étendons le bloc de code précédent en ajoutant une marge et une largeur pour chaque colonne afin de mieux façonner le résultat souhaité.

Section ( float : gauche ; marge : 0 1,5 % ; largeur : 63 % ; ) côté ( float : droite ; marge : 0 1,5 % ; largeur : 30 % ; )

La démo de mise en page avec floatfloat peut modifier la valeur d'affichage de l'élément

Pour un élément flottant, il est également important de comprendre que l'élément est supprimé du flux normal de la page et que la valeur d'affichage par défaut de l'élément peut changer. La propriété float repose sur la valeur d'affichage de l'élément définie sur block et peut modifier la valeur d'affichage par défaut de l'élément s'il n'est pas déjà rendu en tant qu'élément de bloc.

Par exemple, un élément dont l'affichage est défini sur inline , tel qu'un élément inline, ignore les propriétés de hauteur ou de largeur. Cependant, si vous spécifiez un float pour un élément en ligne, la valeur d'affichage deviendra block et l'élément pourra alors déjà prendre les propriétés height ou width.

Lorsque nous faisons flotter un élément, nous devons faire attention à la manière dont cela affecte la valeur de la propriété display.

Pour deux colonnes, vous pouvez définir float, une colonne à gauche et l'autre à droite, mais pour plusieurs colonnes, nous devrons changer notre approche. Disons, par exemple, que nous aimerions obtenir une série de trois colonnes entre nos éléments et . Si nous supprimons notre élément et utilisons trois éléments, notre code HTML pourrait ressembler à ceci :

... ... ... ... ...

Pour disposer ces trois éléments dans une ligne de trois colonnes, nous devons définir le float de tous les éléments à left . Il faut également ajuster la largeur pour prendre en compte les colonnes supplémentaires et les positionner les unes à côté des autres.

Section ( float : gauche ; marge : 0 1,5 % ; largeur : 30 % ; )

Ici, nous avons trois colonnes, toutes avec une largeur et une valeur de marge égales, et float défini sur left .

Démonstration d'une disposition à trois colonnes avec floatClearing et contenu float

La propriété float a été initialement conçue pour permettre au contenu de circuler autour des images. Une image peut recevoir un flottant et tout le contenu autour de cette image circule naturellement autour d'elle. Bien que cela fonctionne très bien pour les images, la propriété float n'est pas vraiment destinée à être utilisée à des fins de mise en page et de positionnement et comporte donc quelques pièges.

L'un de ces pièges est que parfois les styles appropriés n'apparaissent pas sur un élément adjacent ou parent d'un élément flottant. Lorsqu'un élément est défini sur flottant, il est supprimé du flux normal de la page et, par conséquent, les styles d'élément autour de cet élément flottant peuvent être affectés négativement.

Souvent, les valeurs des propriétés margin et padding sont mal interprétées, ce qui les amène à se fondre dans l'élément flottant. D'autres propriétés peuvent également être affectées.

Un autre bug est que parfois du contenu indésirable commence à s'enrouler autour de l'élément float. La suppression d'un élément du flux du document permet à tous les éléments autour de l'élément flottant de le contourner et d'occuper tout l'espace disponible autour de l'élément flottant, ce qui est souvent indésirable.

Dans notre exemple précédent à deux colonnes, après avoir ajouté un flotteur aux éléments et, mais avant de définir la propriété width sur l'un ou l'autre, le contenu à l'intérieur de l'élément était positionné entre les deux éléments flottants au-dessus, remplissant tout l'espace disponible. . Par conséquent, l'élément se trouverait dans l'espace entre les éléments et , occupant de l'espace libre.

Démonstration de tracé sans effacement des flotteurs

Pour empêcher le contenu de s'enrouler autour des éléments flottants, nous devons effacer le flottant et ramener la page à son flux normal. Nous verrons comment effacer les flotteurs, puis examinerons leur contenu.

Flotteurs de dégagement

La suppression d'un flottant s'effectue à l'aide de la propriété clear, qui prend plusieurs valeurs différentes : les valeurs les plus couramment utilisées sont left , right et les deux .

Div ( clair : gauche ; )

La valeur left efface les flotteurs de gauche, tandis que la valeur right efface les flotteurs de droite. Cependant, la valeur à la fois effacera les flotteurs gauche et droit et constitue souvent l'option la plus idéale.

En revenant à notre exemple précédent, si nous utilisons la propriété clear avec la valeur sur un élément, nous pouvons effacer le float. Il est important que clear soit appliqué à l'élément spécifié après les éléments flottants, et pas avant, afin de ramener la page à son flux normal.

Pied de page ( clair : les deux ; )

Démonstration d'une mise en page avec effacement du floatContenu de float

Au lieu d'effacer float , une autre option consiste à définir le contenu sur float . Le résultat sera à peu près le même, mais le contenu flottant garantit vraiment que tous nos styles s'afficheront correctement.

Pour définir le contenu flottant, les éléments flottants doivent être à l'intérieur de l'élément parent, il agira comme un conteneur, laissant le flux du document complètement normal à l'extérieur de celui-ci. Le style de cet élément parent est représenté par une classe de groupe, comme indiqué ici :

Group::before, .group::after ( contenu: ""; affichage: tableau; ) .group::after ( effacer: les deux; ) .group ( effacer: les deux; *zoom: 1; )

Il ne se passe pas grand-chose ici, mais essentiellement tout ce que fait le CSS est d'effacer tous les éléments flottants à l'intérieur de l'élément group et de ramener le document au flux normal.

Plus précisément, les pseudo-éléments ::before et ::after, comme expliqué dans la leçon 4, génèrent dynamiquement des éléments au-dessus et au-dessous d'un élément avec la classe group . Ces éléments n'incluent aucun contenu et sont rendus sous forme d'éléments de table, similaires aux éléments de bloc. Un élément généré dynamiquement après un élément de groupe efface le flotteur à l'intérieur de l'élément de groupe, tout comme clear le faisait auparavant. Enfin, l'élément group efface également tous les flottants qui peuvent apparaître devant lui au cas où il y aurait un flottant avec la valeur left ou right . Une petite astuce est également incluse qui permet aux anciens navigateurs de fonctionner correctement.

Il y a plus de code ici que la simple commande clear: two, mais cela peut être très utile.

Compte tenu de notre mise en page à deux colonnes, nous pourrions également envelopper l'élément parent. Cet élément parent contiendra des éléments flottants. Le code ressemblera à ceci :

... ... ... ...

Group::before, .group::after ( contenu: ""; affichage: table; ) .group::after ( effacer: les deux; ) .group ( effacer: les deux; *zoom: 1; ) section ( float: gauche ; marge : 0 1,5 % ; largeur : 63 % ; ) de côté ( float : droite ; marge : 0 1,5 % ; largeur : 30 % ; )

Démonstration d'une mise en page avec du contenu flottant

La technique présentée ici est connue sous le nom de "clearfix" et est souvent vue sur d'autres sites avec le nom de classe clearfix ou cf. Nous avons choisi d'utiliser le nom de classe group car il représente un groupe d'éléments et exprime mieux le contenu.

Lorsque les éléments sont définis pour flotter, il est important de surveiller la manière dont ils affectent le flux des pages et de garantir que le flux des pages est réinitialisé via l'effacement ou via le contenu flottant comme prévu. Sinon, garder une trace des flottants peut causer beaucoup de problèmes, en particulier sur les pages contenant plusieurs lignes, chacune avec plusieurs colonnes.

En pratique

Revenons au site Styles Conference et essayons d'ajouter des flotteurs à certains contenus.

Tout d'abord, avant d'appliquer float à un élément, fournissons du contenu à ces éléments flottants en ajoutant clearfix à notre CSS. Dans le fichier main.css, juste en dessous de nos styles de grille, nous ajouterons clearfix sous le nom de la classe de groupe, comme avant.

/* ================================================= ====== Clearfix ======= ==================================== * / .group::before, .group::after ( contenu : " " ; affichage : tableau ; ) .group::after ( effacer : les deux ; ) .group ( effacer : les deux ; *zoom : 1 ; )

Maintenant que nous pouvons utiliser un flottant, plaçons-le pour l'élément principal à l'intérieur à gauche et laissons le reste du contenu de l'en-tête flotter vers la droite. Pour ce faire, ajoutez la classe logo à l'élément. Ensuite, dans notre CSS, nous ajouterons nouvelle rubrique

styles pour l’en-tête principal. Dans cette section, nous allons sélectionner un élément avec la classe logo et définir le float sur left . Conférence sur les styles

/* ======================================= En-tête principal ====== = =================================== */ .logo ( float: gauche; )
Pendant que nous y sommes, ajoutons un peu plus de détails à notre logo. Commençons par placer l'élément

ou un saut de ligne entre les mots « Styles » et « Conférence » pour forcer le texte de notre logo à apparaître sur deux lignes.

En CSS, nous ajouterons une bordure en haut de notre logo et un remplissage vertical afin que le logo puisse « respirer » librement.
Styles

Conférence

Puisque nous avons rendu l'élément float, nous souhaitons définir le contenu sur float . Le parent le plus proche de est l'élément, nous allons donc lui ajouter une classe de groupe. Cela lui appliquera les styles clearfix que nous avons définis précédemment.

...

L'élément prend forme, alors jetons un coup d'œil au . Semblable à ce que nous avons fait avec , nous allons placer le flotteur de nos droits d'auteur à gauche à l'intérieur et laisser tous les autres éléments circuler autour de lui vers la droite.

Cependant, contrairement à l'élément, nous n'allons pas appliquer la classe directement à l'élément flottant. Cette fois, nous allons ajouter une classe au parent de l'élément float et utiliser un sélecteur CSS unique pour sélectionner l'élément, puis lui attribuer un float .

Commençons par ajouter la classe Primary-footer à l'élément. Puisque nous savons que nous aurons des éléments flottants à l’intérieur, nous devrions ajouter une classe de groupe pendant que nous y sommes.

...

Maintenant que la classe Primary-footer est définie sur l'élément, nous pouvons utiliser cette classe pour sélectionner spécifiquement l'élément à l'aide de CSS. Nous voulons lui donner un float comme left . N'oubliez pas de créer une nouvelle section dans notre fichier main.css pour le style de pied de page principal.

/* ======================================== Sous-sol principal ====== ==================================== */ .primary-footer small ( float: left; )

Pour vérifier, nous sélectionnons ici un élément qui doit être à l'intérieur d'un élément avec la valeur de pied de page principale de l'attribut class, comme notre élément, par exemple.

Enfin, nous ajouterons un peu de remplissage en haut et en bas de l'élément, cela aidera à le séparer un peu du reste de la page. Nous pouvons le faire directement en utilisant la classe Primary-footer.

Pied de page principal ( padding-bottom: 44px; padding-top: 44px; )

Avec toutes ces modifications apportées aux éléments et , nous devons être sûrs de les apporter sur chaque page, pas seulement sur la page index.html.

Riz. 5.01. En utilisant plusieurs flottants, les éléments de la page principale de Styles Conference fonctionnent ensemble

Positionnement via un bloc en ligne

En plus d'utiliser float, une autre façon de positionner le contenu consiste à utiliser la propriété display en combinaison avec la valeur inline-block. La méthode des blocs en ligne, comme nous le verrons plus tard, est principalement utile pour mettre en page des pages ou pour placer des éléments sur une ligne les uns à côté des autres.

Rappelez-vous que la valeur inline-block de la propriété display affiche les éléments sur une ligne et leur permet de prendre toutes les propriétés du modèle de boîte, notamment height , width , padding , border et margin . L'utilisation de inline-block nous permet de tirer pleinement parti du modèle de bloc sans avoir à nous soucier de supprimer les flotteurs.

bloc en ligne en pratique

Jetons un coup d'œil à notre exemple à trois colonnes depuis le début. Nous allons commencer par enregistrer notre HTML comme ceci :

... ... ... ... ...

Maintenant, au lieu de float pour nos trois éléments, nous allons changer leur valeur d'affichage en inline-block , laissant les propriétés margin et width telles qu'elles étaient auparavant. En conséquence, notre CSS ressemblera à ceci :

Section ( affichage : bloc en ligne ; marge : 0 1,5 % ; largeur : 30 % ; )

Malheureusement, ce code à lui seul ne suffit pas à faire l'affaire et le dernier élément est poussé sur une nouvelle ligne. N'oubliez pas que, comme les éléments de bloc en ligne apparaissent sur une ligne les uns à côté des autres, ils incluent un seul espace entre eux. Lorsque la taille de chaque espace individuel est ajoutée à la largeur et à la valeur de marge horizontale de tous les éléments de la ligne, la largeur globale devient trop grande, poussant le dernier élément sur une nouvelle ligne. Pour afficher tous les éléments sur une seule ligne, vous devez supprimer l'espace blanc entre chacun.

Démonstration d'éléments de bloc en ligne avec spaceSuppression de l'espace entre les éléments de bloc en ligne

Il existe plusieurs méthodes pour supprimer l'espace entre les éléments de bloc en ligne, et certaines sont plus complexes que d'autres. Nous allons nous concentrer sur les deux plus méthodes simples, dont chacun se produit dans HTML.

La première solution consiste à placer la balise d'ouverture de chaque nouvel élément sur la même ligne que la balise de fermeture de l'élément précédent. Au lieu d'utiliser nouvelle ligne pour chaque élément, nous finissons par commencer les éléments sur la même ligne. Notre code HTML pourrait ressembler à ceci :

... ... ... ... ...

L'écriture d'éléments de bloc en ligne de cette manière garantit qu'il n'y a pas d'espace entre ces éléments en HTML. Par conséquent, l’espace n’apparaîtra pas lors de l’affichage de la page.

Démonstration d'éléments de bloc en ligne sans espaces

Une autre méthode pour supprimer l'espace entre les éléments de bloc en ligne consiste à ouvrir un commentaire HTML immédiatement après la balise de fermeture de l'élément. Fermez ensuite le commentaire juste avant la balise ouvrante de l’élément suivant. Cela permet aux éléments de bloc en ligne de commencer et de se terminer sur des lignes distinctes en HTML et de « commenter » tout espace potentiel entre les éléments. Le code résultant ressemblera à ceci :

... ... ... ... ...

Aucune de ces options n’est parfaite, mais elles sont utiles. J'ai tendance à privilégier l'utilisation des commentaires pour une meilleure organisation, mais l'option que vous choisissez dépend entièrement de vous.

Créer des mises en page réutilisables

Lors de la création d'un site, il est toujours préférable d'écrire des styles modulaires qui peuvent être réutilisés ailleurs, et les mises en page réutilisables figurent en tête de liste du code réutilisable. Les mises en page peuvent être créées à l’aide d’éléments flottants ou de blocs en ligne, mais lequel fonctionne le mieux et pourquoi ?

La question de savoir si les éléments flottants ou en blocs en ligne sont meilleurs pour la structure des pages est ouverte au débat. Mon approche consiste à utiliser des éléments de bloc en ligne pour créer une grille ou une mise en page, puis à utiliser un flotteur lorsque je souhaite que le contenu circule autour de l'élément (ce pour quoi les flotteurs ont été conçus lorsque je travaille avec des images). En général, je trouve également que les éléments de blocs en ligne sont plus faciles à utiliser.

Cependant, utilisez ce qui vous convient le mieux. Si vous êtes plus familier avec une approche qu’une autre, utilisez-la.

De nouvelles spécifications CSS sont en préparation - en particulier les propriétés flex et grid - qui vous aideront à décider de la meilleure façon de présenter vos pages. Gardez un œil sur ces méthodes lorsqu’elles commencent à apparaître.

En pratique

Avec une solide compréhension des mises en page réutilisables, il est temps d'en implémenter une sur notre site Styles Conference.

Pour le site Web de Styles Conference, nous créerons une mise en page à trois colonnes en utilisant des éléments de blocs en ligne. Nous ferons cela de manière à obtenir trois colonnes de même largeur, ou deux colonnes dont la largeur totale est divisée entre elles par 2/3 pour l'une et 1/3 pour l'autre.

Tout d’abord, nous allons créer des classes qui définissent la largeur de ces colonnes. Nous appellerons ces deux classes col-1-3 pour un tiers et col-2-3 pour les deux tiers. Dans la section Grid de notre fichier main.css, avançons et définissons ces classes et leurs largeurs correspondantes.

Col-1-3 (largeur : 33,33 % ; ) .col-2-3 (largeur : 66,66 % ; )

Nous voulons que les deux colonnes apparaissent sous forme d'éléments de bloc en ligne. Nous devons également nous assurer que leur alignement vertical est défini en haut de chaque colonne.

Créons deux nouveaux sélecteurs qui partagent display et vertical-align .

Col-1-3, .col-2-3 ( affichage : bloc en ligne ; alignement vertical : haut ; )

Jetez à nouveau un œil à CSS. Nous avons créé deux sélecteurs de classe col-1-3 et col-2-3 séparés par une virgule. Une virgule à la fin du premier sélecteur signifie qu'il est suivi d'un autre sélecteur. Après le deuxième sélecteur, il y a une accolade ouvrante, qui indique que la description du style commence. En utilisant une virgule pour séparer les sélecteurs, nous pouvons lier un style à plusieurs sélecteurs en même temps.

Nous souhaitons mettre un peu d'espace entre les colonnes pour aider à diviser le contenu. Cela peut être fait en ajoutant un remplissage horizontal à chaque colonne.

Cela fonctionne bien, cependant, lorsque deux colonnes sont placées l'une à côté de l'autre, la largeur de l'espace entre elles sera deux fois plus large que l'espace depuis le bord extérieur. Pour équilibrer cela, nous placerons toutes nos colonnes dans une grille et y ajouterons le même remplissage.

Utilisons la classe Grid pour définir notre grille, puis donnons le même remplissage horizontal aux classes Grid, Col-1-3 et Col-2-3. Avec à nouveau des virgules séparant nos sélecteurs, notre CSS ressemble à ceci :

Grille, .col-1-3, .col-2-3 ( padding-left : 15px ; padding-right : 15px; )

Lorsque nous définissons un remplissage horizontal, nous devons être prudents. N'oubliez pas que dans la dernière leçon, nous avons créé un conteneur avec la classe conteneur pour centrer tout notre contenu sur la page d'une largeur de 960 pixels. DANS à l'heure actuelle, si nous placions un élément avec la classe grid à l'intérieur d'un élément avec la classe conteneur, alors leur remplissage horizontal s'additionnerait et nos colonnes ne seraient pas affichées proportionnellement à la largeur du reste de la page.

Pour ce faire, nous décomposons l'ancien ensemble de règles du conteneur comme suit :

Conteneur, .grid ( marge : 0 auto ; largeur : 960px ; ) .container ( padding-left : 30px ; padding-right : 30px; )

Désormais, tout élément avec la classe conteneur ou grille aura une largeur de 960 pixels et sera situé au centre de la page. De plus, nous avons conservé le remplissage horizontal existant pour tout élément avec la classe conteneur en le déplaçant vers un nouvel ensemble de règles distinct.

Bon, toute la partie la plus difficile de la configuration du maillage est terminée. Il est maintenant temps de travailler avec notre HTML et de voir comment fonctionnent ces classes.

Nous commencerons par les teasers de la page d'accueil, dans le fichier index.html, alignés sur trois colonnes. Actuellement, les teasers sont enveloppés dans un élément avec la classe conteneur. Nous voulons changer la classe de conteneur en grille afin de pouvoir commencer à placer des colonnes à l'intérieur.

...

... ... ...

Et enfin, puisque chacune de nos colonnes est un élément de bloc en ligne, nous devons nous assurer de supprimer tout espace blanc entre elles. Pour ce faire, nous utiliserons des commentaires et ajouterons de la documentation à chaque section afin de mieux organiser notre code.

... ... ...

Pour vérifier, nous avons laissé un commentaire à la ligne 3 identifiant la rubrique « Intervenants » qui la suit. A la fin de la ligne 7, on ouvre un commentaire immédiatement après la balise fermante. A l'intérieur de ce commentaire, à la ligne 9 nous définissons la section suivante "Horaire". Puis on ferme le commentaire au début de la ligne 11, juste avant la balise ouvrante. Une structure de commentaire similaire apparaît aux lignes 13 à 17 entre les deux éléments, juste avant la section « Lieu ». En général, nous avons commenté tout espace blanc potentiel entre les colonnes, tout en utilisant simultanément les mêmes commentaires pour identifier nos sections.

Nous disposons désormais d'une grille réutilisable à trois colonnes qui prend en charge différentes mises en page, utilisant des largeurs de colonne de 1/3 et 2/3. Notre page d'accueil contient désormais trois colonnes, séparant tous les teasers.

Riz. 5.02. Page d'accueil Styles Conference comprend désormais une mise en page à trois colonnes

Démo et code source

Ci-dessous, vous pouvez consulter le site Web de Styles Conference dans son état actuel, ainsi que télécharger le code source actuel du site.

Positionnement unique des éléments

Tôt ou tard, tout le monde voudra positionner un élément avec précision, mais les éléments float ou inline-block ne permettent pas une telle astuce. Les éléments flottants qui suppriment un élément du flux de la page produisent souvent des résultats indésirables car les éléments environnants s'enroulent autour de l'élément flottant. Les éléments de bloc en ligne, à moins que nous créions des colonnes, peuvent être assez gênants lorsqu'il s'agit de position correcte. Pour des situations comme celle-ci, nous pouvons utiliser la propriété position en combinaison avec les propriétés de décalage du bloc.

La propriété position détermine comment l'élément est positionné sur la page et s'il sera affiché dans le flux de documents normal. Il est utilisé conjointement avec les propriétés de décalage du bloc top , right , bottom et left , qui déterminent exactement où l'élément sera positionné en le déplaçant dans différentes directions.

Par défaut, la valeur de position de chaque élément est définie sur static , ce qui signifie que l'élément existe dans le flux normal du document et ne prend aucune propriété pour le positionner. La valeur static est le plus souvent écrasée par la valeur relative ou absolue , que nous examinerons ensuite.

Positionnement relatif

Définir la propriété position sur relatif permet aux éléments d'apparaître dans le flux normal de la page, en réservant de l'espace pour l'élément comme prévu et en empêchant d'autres éléments de circuler autour de lui. Cependant, il permet également de modifier la position d'un élément à l'aide des propriétés de décalage. Par exemple, considérons le HTML et le CSS suivants :

... ... ...

Div ( hauteur : 100 px ; largeur : 100 px ; ) .offset ( gauche : 20 px ; position : relative ; haut : 20 px ; )

Démonstration de positionnement relatif

Ici, le deuxième élément avec la classe offset a sa valeur de position définie sur relative , ainsi que deux propriétés de décalage - left et top . Cela conserve la position d'origine de l'élément et les autres éléments ne sont pas autorisés à se déplacer dans cette zone. De plus, les propriétés de décalage déplacent l'élément en le poussant de 20 pixels vers la gauche et de 20 pixels vers le haut de l'emplacement d'origine.

Pour les éléments positionnés relativement, il est important de savoir que les propriétés de décalage du bloc déterminent où l'élément sera déplacé, compte tenu de sa position d'origine. Ainsi, une propriété left avec une valeur de 20 pixels pousse en fait l'élément vers la droite de 20 pixels. Une propriété top avec une valeur de 20px poussera alors l'élément vers le bas de 20px.

Lorsque nous positionnons un élément à l'aide des propriétés de décalage, l'élément chevauche l'élément situé en dessous, plutôt que de le pousser vers le bas comme le font les propriétés margin ou padding.

Positionnement absolu

La valeur absolue de la propriété position diffère de la valeur relative dans la mesure où l'élément en position absolue n'apparaît pas dans le flux normal du document et que l'espace et la position d'origine de l'élément en position absolue ne sont pas réservés.

De plus, les éléments en position absolue se déplacent par rapport à leur élément parent en position relative le plus proche. Si un parent positionné de manière relative n'existe pas, alors l'élément en position absolue sera positionné par rapport à l'élément. Ceci est une petite information ; Voyons comment cela fonctionne dans du code :

...

Section ( position : relative ; ) div ( position : absolue ; droite : 20px ; haut : 20px ; )

Démonstration de positionnement absolu

Cet exemple positionne l'élément de manière relative, mais n'inclut aucune propriété de décalage. Sa position ne change donc pas. Un élément avec un décalage de classe inclut une valeur de position absolue . Puisque l'élément est l'élément parent positionné relativement le plus proche de l'élément, l'élément sera positionné par rapport à l'élément.

Pour les éléments positionnés relativement, les propriétés de décalage déterminent dans quelle direction l'élément sera déplacé par rapport à lui-même. Pour les éléments positionnés de manière absolue, les propriétés de décalage déterminent dans quelle direction l'élément sera déplacé par rapport à son parent positionné le plus proche.

Grâce aux propriétés right et top, l'élément apparaîtra à 20 pixels de la droite et à 20 pixels du haut à l'intérieur.

Étant donné que l'élément est positionné de manière absolue, il n'est pas positionné dans le flux normal de la page et chevauchera tous les éléments environnants. De plus, la position d'origine n'est pas conservée et d'autres éléments peuvent prendre cette place. En général, la plupart des positionnements peuvent être effectués sans utiliser les propriétés de position et de décalage, mais dans certains cas, elles peuvent être extrêmement utiles.

CV

Apprendre à positionner le contenu en HTML et CSS est un grand pas vers la maîtrise de ces langages. Ajoutez à cela le modèle de bloc et nous sommes sur la bonne voie pour devenir des développeurs front-end.

De l'auteur : Salutations. Le positionnement des éléments CSS est un sujet très important dans la création de sites Web. Dans cet article, je propose d'examiner plus en détail toutes les manières de déplacer des blocs dans une page Web.

Quels sont les types

Si nous parlons du positionnement des éléments de bloc, il est défini à l'aide de la propriété position. Il a quatre significations et chacune mérite un examen séparé.

Positionnement absolu

C'est le premier de espèce connue. Il est défini comme ceci : position : absolue. Après cela, le bloc perd ses propriétés habituelles et sort complètement du flux normal. Quel est ce flux ? Essayez de placer plusieurs éléments de bloc d'affilée dans votre balisage. Comment deviendront-ils ? L'un après l'autre, et pas d'autre.

C'est le comportement normal des blocs par défaut. Mais qu’arrive-t-il à un bloc dont le positionnement absolu est défini ? Il sort complètement du flux normal, les autres blocs cessent tout simplement de le remarquer, comme s'il n'avait jamais existé, mais l'élément reste sur la page. Le positionnement absolu en CSS est souvent utilisé pour le placement précis d'éléments décoratifs, d'icônes et d'autres éléments de conception.

Il peut désormais être déplacé à l'aide des propriétés left, right, top et bottom. Par défaut, le mouvement est relatif aux bords de la fenêtre du navigateur, mais si l'élément parent a position: relative, alors le mouvement est relatif au bloc parent.

Bloc (position : absolue ; bas : 0 ; droite : 0 ; )

Bloc ( position : absolue ; bas : 0 ; à droite : 0 ;

L'élément sera déplacé vers le coin inférieur droit. Je remarque qu'ils font souvent le bouton du haut de cette façon - ils le placent simplement absolument dans le coin même. Voici un autre exemple dans lequel je vais d'abord montrer le balisage possible :

< div id = "wrapper" > < div class = "block" > < / div > < / div >

Et maintenant les styles CSS pour ce fragment :

#wrapper( position : relative ; ) .block( position : absolue ; haut : 0 ; droite : 10px ; )

#wrapper( position : relative ; Bloc ( position : absolue ; haut : 0 ; à droite : 10px ;

Dans cet exemple, nous avons d'abord attribué un positionnement relatif au conteneur parent (relatif - nous en parlerons plus loin dans l'article), puis avons défini un positionnement absolu pour le même element.block. En conséquence, les coordonnées ne seront pas comptées à partir de la fenêtre du navigateur elle-même, mais à partir des bords de l'élément parent, c'est-à-dire du bloc wrapper.

Positionnement relatif des éléments CSS

C'est le type suivant et il s'écrit comme ceci – position : relative. Les coordonnées sont spécifiées par les mêmes propriétés que pour la position absolue. La seule différence significative est que l'élément ne tombe pas formellement hors du flux - il reste de la place pour lui.

Le fonctionnement de cette valeur peut être comparé à la visibilité : caché, lorsque l'élément est masqué de la page, mais que l'espace en dessous reste intact. La même chose se produit avec le placement relatif - le bloc peut être déplacé n'importe où, mais son espace reste vide et ne sera pas occupé par d'autres pièces.

Il est également important de savoir que le décalage ne se produit pas à partir des bords de la fenêtre du navigateur Web, mais à partir de l'endroit où se trouvait initialement le bloc. C'est-à-dire:

Bloc( position : relative ; haut : 10px ; droite : 50px ; )

Bloc ( position : relative ; haut : 10px ; à droite : 50px ;

Le bloc se déplacera de 50 pixels vers la droite et de 10 vers la gauche.

Fixation

Vous avez probablement vu plus d'une fois sur des sites Internet lorsque, lors du défilement, une bannière ne disparaissait pas, mais continuait à être dans votre zone de visibilité, comme si elle était collée au même endroit. Ceci est principalement mis en œuvre en utilisant un positionnement fixe. Pour ce faire, vous devez écrire :

Position : position statique ou statique normale

Le dernier type est statique, c'est le comportement habituel des éléments de bloc. Il n'est pas nécessaire de le spécifier, car c'est le cas par défaut, mais vous devez quand même connaître la quatrième valeur. Parfois, position: static est écrit pour remplacer un autre type de positionnement lorsque certains événements se produisent sur une page Web.

Comment positionner correctement les blocs en CSS ?

Nous avons discuté des significations, mais cela ne suffit pas pour clore ce sujet pour nous-mêmes. En fait, vous devez comprendre où et quels types de positionnement doivent être appliqués. Je vous ai déjà donné un exemple avec fixe - il peut être utilisé pour créer des colonnes latérales collantes, des en-têtes ou des pieds de page.

Le positionnement relatif vous aidera lorsque vous devrez déplacer légèrement un bloc par rapport à sa position tout en conservant sa place dans le flux. Il est également donné aux blocs parents d'utiliser le mouvement absolu pour les éléments enfants.

Autres techniques : centrage, blocs flottants

La propriété position ne résout pas tous les problèmes liés au placement des éléments de bloc. Comment créeriez-vous, par exemple, une grille de site en l'utilisant ? je n'ai pas bonnes idées. C'est là que d'autres propriétés viennent à la rescousse.

Les grilles sont souvent créées à l'aide de flotteurs en CSS. La propriété vous permet d'appuyer sur un bloc sur le bord gauche ou droit du parent (float : left, float : right), permettant à plusieurs éléments de bloc de s'aligner sur une seule ligne, ce qui est courant sur n'importe quel site.

Le centrage se fait comme ceci : le bloc doit écrire une certaine largeur, puis définir la marge : 0 propriété auto. C'est la valeur automatique qui l'alignera horizontalement exactement au centre. Naturellement, pour cela, il doit être le seul dans sa lignée, sinon rien ne fonctionnera.

Tous les types de positionnement répertoriés dans cet article peuvent être utiles à un développeur web. Quelque part, vous devez insérer une icône (position : absolue), quelque part vous devez ajuster légèrement la position du bloc, en laissant un peu d'espace derrière lui (position : relative), et quelque part vous devez réparer le widget (position : fixe). En général, la connaissance de cette propriété ne sera certainement pas superflue.

Eh bien, pour en savoir encore plus sur le monde de la création de sites Web, assurez-vous de vous abonner à notre blog et de recevoir de nouveaux supports de formation. Je vous conseille également de regarder le nôtre, où un sujet similaire est également évoqué. (positionnement des éléments)

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 gauche est défini sur une valeur supérieure à la largeur de la zone visible, ou si droite est défini sur une valeur négative, une barre de défilement horizontale apparaîtra. Une règle similaire fonctionne avec top , seulement nous parlerons d'une barre de défilement verticale.
• 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, les éléments doivent avoir une propriété de débordement définie sur 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 ; ) #barre latérale (largeur : 150 px ; arrière-plan : #ECF5E4 ; bordure droite : 1px solide #231F20 ; haut : 82 px ; /* Distance depuis le bord supérieur */ bottom: 0; /* Distance depuis le bas */ ) #content ( top: 82px; /* Distance depuis le bord supérieur */ left: 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é de la quantité d'eau requise et laissez bouillir.

Couvrez le riz d'une couche uniforme, augmentez le feu et versez 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, utilisez une écumoire pour récupérer 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 la barre latérale et de contenu sont définies sur un positionnement absolu.

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, tels que des info-bulles photo. Contrairement à l'attribut title de la balise 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 de 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 chaînée */ font-size: 9pt; /* Taille de la police */ couleur: #333; /* Couleur de fond */ )

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 de couche // 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 Safari, le script ne fonctionne parfois 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

Poste fixe

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 */ background: #39b54a; /* Couleur d'arrière-plan */ color: #fff; /* Couleur du texte */ width: 100%; /* Largeur de couche */ ) 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. Étant donné que le pied de page fixe recouvre et masque le texte, un remplissage inférieur a été ajouté 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

La définition de la propriété position sur relative définit la position de l'élément par rapport à son emplacement 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). Si le bas est positif, l'élément monte, et si le bas est négatif, il descend.

• 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 à sa position d'origine, l'espace occupé par l'élément reste vide et n'est pas rempli par les éléments situés en dessous ou au-dessus de lui.

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

En règle générale, le positionnement relatif lui-même n'est pas souvent utilisé, car il existe un certain nombre de propriétés qui remplissent en réalité le même rôle, par exemple la même marge . Mais la combinaison de différents types de positionnement pour les calques imbriqués est l'une des techniques de mise en page les plus pratiques et les plus 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 20px). Ce comportement est appelé effondrement des marges. Deux tirets sont combinés en un seul. Les éléments positionnés de manière absolue n'ont pas de marge de réduction, le résultat peut donc ne pas être celui que vous attendez.

IE et z-index.

Dans IE6, un élément est toujours sélectionné en haut de la pile, quel que soit son z-index ou celui des éléments environnants.

IE6 et IE7 ont un autre problème avec z-index. IE examine l'élément parent pour déterminer dans quel groupe d'éléments se trouve le haut de la pile, d'autres navigateurs utilisent le contexte global. Par exemple:

Nous nous attendons à ce que le paragraphe apparaisse plus haut que l'image car son z-index est plus grand. Cependant, IE6 et IE7 placent l'image plus haut car elles se trouvent dans des piles de documents différentes. Une pile est pour div, la seconde est pour img et l'image a un z-index plus élevé que le div.

Conclusion

La propriété position définit le comportement de positionnement d'un élément selon l'un des schémas de positionnement. Les valeurs de propriété disponibles sont absolues, relatives, fixes, statiques (par défaut) et héritées.

La propriété z-index ne peut être appliquée qu'aux éléments dont la propriété position est définie. Il ajoute une troisième dimension à la page et définit l'ordre de pile des éléments.

La propriété position semble facile à comprendre, mais elle fonctionne un peu différemment de ce qu’il semble à première vue. Les développeurs pensent souvent qu'ils ont besoin d'un positionnement relatif, même s'ils devraient probablement utiliser un positionnement absolu. Fondamentalement, la propriété float est utilisée lors de la mise en page et la propriété position est nécessaire pour les éléments que vous souhaitez « arracher » du flux général du document.

Comme vous le savez probablement déjà, vous pouvez mettre en page un site Web à l'aide de tableaux, auquel cas la page est divisée en cellules. Vous pouvez également utiliser des blocs à ces fins lorsqu'une page d'un site Web est composée d'éléments individuels.

Je ne me tromperai probablement pas si je dis qu'un problème sérieux pour de nombreux webmasters débutants est la tâche de placer des blocs à un endroit donné sur une page Web.

L'une des principales difficultés lors d'un tracé à l'aide de blocs est le positionnement (l'alignement) de ces mêmes blocs.

Un peu sur les couches

Je pense que beaucoup d’entre vous ont entendu parler d’une couche. Et, en règle générale, un calque est compris comme un bloc spécifié par la balise. En fait, tout est un peu différent.

Il n'y a pas de calques en HTML. C'est juste une métaphore. Lorsqu'il s'agit de calques, ils désignent un certain conteneur HTML (élément) qui peut être placé à un certain endroit sur une page Web.

La deuxième idée fausse est de classer uniquement le bloc spécifié par la balise comme couches. Ce n’est pas vrai non plus. Ceux-ci peuvent également inclure des paragraphes (

), listes (

) et d'autres éléments.
Et maintenant, ah.

Comme mentionné ci-dessus, vous pouvez définir l'emplacement de n'importe quel élément HTML. Il n'est pas nécessaire de toujours utiliser la balise pour cela. De plus, l'utilisation de cette balise ne vous oblige pas à lui attribuer une position sur la page Web.

La signification de l'utilisation d'un bloc spécifié par une balise se résume à l'agrandissement. Après tout, vous pouvez y placer d'autres éléments (paragraphes, images, etc.). Cela crée un gros bloc au contenu varié, beaucoup plus facile à positionner sur une page Web que chaque élément individuellement.

Positionnement des éléments.

Il existe quatre principaux types de positionnement :

1. Statique
2. Absolu
3. Corrigé
4. Parent

Statique

Utilisé comme emplacement par défaut. Dans ce cas, le navigateur affiche code HTML, le divise en éléments et compose une page à partir d'eux. Le résultat est une séquence d’un certain nombre d’éléments. Ils sont affichés dans l'ordre dans lequel ils sont indiqués dans le code html.

L'application des paramètres gauche, haut, droite et bas ne produit aucun résultat.

Le positionnement statique doit être gardé à l’esprit lors de l’utilisation du positionnement relatif.

Absolu

En utilisant le positionnement absolu, les coordonnées du coin supérieur gauche du bloc sont spécifiées. Dans ce cas, les coordonnées sont comptées par rapport à l'emplacement de l'élément parent. Si l'élément parent est une fenêtre de navigateur, alors le bloc est aligné par rapport à elle. S'il existe un autre élément à l'intérieur duquel se trouve le bloc, alors l'alignement se produit par rapport à cet élément.

Fixé

D'après le nom, il apparaît clairement que dans ce cas, l'élément est fixe. Il se situe à un endroit précis de la page web et ne se déplace nulle part. Cet alignement est souvent utilisé pour les fenêtres contextuelles, où elles sont centrées et ne bougent pas lorsque vous faites défiler la page.

Relatif

Ce type de positionnement peut être difficile. Son nom n'est pas tout à fait approprié. Beaucoup de gens confondent le positionnement relatif et absolu des éléments. Il peut sembler que l'alignement soit relatif à l'élément parent. Et dans le cas d'un positionnement absolu - par rapport à la fenêtre du navigateur. Mais ce n'est pas vrai.

Il faut comprendre que l'emplacement de l'élément dans ce cas se produit par rapport à sa place dans une position statique. C'est ce qui a été mentionné ci-dessus.

En termes simples, vous dites au navigateur de déplacer un élément d'autant de pixels par rapport à l'endroit où il se trouve par défaut.

Il y a un autre point difficile. Que se passe-t-il si l'élément parent a un positionnement relatif, mais que l'élément imbriqué a un positionnement absolu ? Dans ce cas, les coordonnées de l'élément enfant seront comptées par rapport à l'élément parent, en tenant compte de son éventuel décalage.

Résumons.

Il existe donc une propriété de position. Cette propriété peut prendre 4 valeurs Statique, Absolue, Fixe et Relative. La valeur par défaut est Statique.

Lorsque vous spécifiez les coordonnées d'un élément, vous devez également indiquer au navigateur comment il doit calculer ces coordonnées. Nous devons lui donner un point de départ.

N'oubliez pas que si la propriété position est absente, les coordonnées ne seront pas prises en compte, le bloc restera au même endroit, dans sa position statique.


Voyons maintenant comment les coordonnées sont définies.

À ces fins, quatre types de propriétés sont utilisés :

1. Haut
2.Gauche
3.Droit
4. Bas

Haut : une valeur positive (par exemple, 20 px) déplace le bloc de 20 pixels vers le bas. Une valeur négative (-20px) déplace l'élément de 20 pixels vers le haut. Tout cela se produit par rapport au coin supérieur gauche.

Gauche - déplacement vers la gauche ou la droite, selon le signe. Par rapport au coin supérieur gauche.

Droite - déplacez-vous vers la droite et la gauche, selon le signe. Par rapport au coin supérieur droit.

En bas - déplacez-vous vers le haut ou vers le bas, selon le signe. Se produit par rapport au coin inférieur gauche.

Voici le code HTML :









Et voici le CSS :

#1 {
position : relative ;
haut : 100 px ;
gauche : 100 px ;
largeur : 500 px ;
hauteur : 500 px ;
couleur d'arrière-plan :#CCCCCC ;
}

#11 {
couleur d'arrière-plan : #003399 ;
position : absolue ;
bas : -30px ;
à droite : -50px ;
largeur : 100 px ;
hauteur : 100 px ;
}

#2 {
couleur d'arrière-plan : #990066 ;
largeur : 200 px ;
hauteur:300px
}

Pratique.

Pendant que j'écrivais, je l'ai compris moi-même.