Déplacement des blocs CSS. Positionnement en CSS. Démonstration de positionnement relatif

Un élément bloc en HTML est un élément qui, par défaut, occupe toute la largeur de son élément parent. L'élément parent peut être un autre élément de bloc ou une fenêtre de navigateur. Vous pouvez définir la largeur et la hauteur d'un élément de bloc à l'aide des propriétés CSS. Le positionnement des éléments de bloc est le processus consistant à les positionner à l'intérieur de la fenêtre du navigateur et par rapport à eux. en utilisant CSS propriétés position , gauche , haut , droite et bas . Propriété Position CSS est destiné à spécifier l'un des quatre types disponibles positionnement : statique (par défaut), absolu, fixe et relatif. Les propriétés CSS restantes, à savoir left , top , right et bottom sont destinées à définir les distances par rapport à left, top, right et bord inférieurélément parent. Bloquer également les éléments lorsque cela est spécifié certaines propriétés peuvent se chevaucher, et cette opportunité la même chose peut être utilisée sur les sites Web.

Positionnement par défaut (statique)

Si vous n'avez pas spécifié de position pour un élément de bloc ou spécifié static , ce qui revient au même, alors les éléments de bloc sont disposés dans l'ordre. De plus prochain bloc(par exemple : rouge) est situé avec nouvelle ligne. De plus, ce positionnement n'est pas affecté par le réglage des distances à gauche, en haut, à droite et en bas.

Positionnement absolu (absolu)

Avec le positionnement absolu, la position d'un élément est spécifiée par rapport aux bords de la fenêtre du navigateur à l'aide des distances spécifiées par les propriétés left , top , right et bottom . Si vous spécifiez les distances gauche et droite en même temps et qu'elles sont en conflit les unes avec les autres, alors la préférence est donnée à left , il en va de même pour top et bottom , dans lesquels la distance top est prioritaire. Le positionnement absolu est souvent utilisé conjointement avec le positionnement relatif à des fins de conception lorsqu'il est nécessaire de placer divers éléments les uns par rapport aux autres, peuvent également être utilisés pour créer des menus déroulants, une mise en page de site, etc.

Positionnement fixe

Le positionnement fixe est différent des autres types de positionnement et ne bouge pas avec le contenu lorsque vous faites défiler la page. Éléments de bloc avec un positionnement fixe sont ancrés à l'aide des propriétés left , top , right et bottom aux bords de la fenêtre du navigateur. Le positionnement fixe permet de créer des interfaces de frame (la fenêtre du navigateur est divisée en plusieurs zones), menu fixe, un pied de page de site fixe et des blocs « permanents » (liste de liens, boutons sociaux etc.).

Positionnement relatif

Le positionnement relatif est spécifié en spécifiant les distances left , top , right et bottom par rapport à sa position actuelle.

Cependant, cette position de bloc peut également être créée en utilisant propriétés de marge(retraits).

Le positionnement relatif n'est pas amusant à utiliser seul, il est principalement utilisé en conjonction avec le positionnement absolu.

Considérons les options :

Imaginez qu'un développeur Web n'ait pas du tout à penser à quoi il ressemblera visuellement page terminée. Il écrit simplement le code, les éléments eux-mêmes s'alignent sur la page, de haut en bas (block) et de gauche à droite (inline). Plus le code est écrit haut dans le document, plus il apparaîtra haut sur la page.

En général, nous verrons le comportement naturel des éléments, et l'ordre dans lequel ils sont affichés sur la page - le flux du document. Mais nous ne sommes pas du tout satisfaits de cette commande ; nous souhaitons placer le logo à gauche. coin supérieur, et le bouton est légèrement vers la droite. Nous avons besoin contrôle total sur tous les éléments, nous décidons où et ce qui sera situé. Et pour cela, vous avez besoin d'un outil (propriété) qui modifie le comportement normal des éléments du flux. De quel genre de propriété s'agit-il ?

Dans les styles CSS, cela s'appelle le positionnement, qui peut être statique, relatif ou absolu.

Positionnement relatif en CSS

Avec un positionnement relatif, le bloc se déplace par rapport à son position de départ. Cependant, après avoir écrit dans le bloc :

Position : relative ;

il ne se passera rien, il restera en place. Et le bloc est déplacé selon un système de coordonnées (haut, bas, gauche, droite), avec des valeurs positives et négatives.

Comment cela marche-t-il?

À l’intérieur du bloc jaune avec la classe block-jaune se trouve un bloc rouge avec la classe block-relative . Dans un flux normal, le bloc rouge chevauche le jaune, puisqu'il est écrit en dernier dans le code.

position de départ
position relative

Nous devons déplacer le bloc rouge vers le bas de 10 pixels. Cela ne peut être fait qu'en changeant de force la position du bloc rouge. C'est ainsi qu'on écrit top: 10px , mais il faut indiquer d'où doivent être comptés ces 10 pixels ?

En écrivant position: relative , nous indiquons clairement que nous comptons par rapport à sa position actuelle.

Bloc-jaune (
couleur d'arrière-plan : #ffe70f ;
}

Relatif au bloc (
position : relative ;
haut : 10px ;
couleur d'arrière-plan : #ed5b77 ;
}

Sur l'image, nous voyons comment le bloc rouge s'est déplacé vers le bas, de 10 pixels par rapport à sa position d'origine.

Si vous supprimez position: relative du code, le bloc restera en place. Et si au lieu de relatif nous écrivons absolu , alors par défaut ces 10 pixels seront comptés à partir du bord de la fenêtre du navigateur et, par conséquent, notre bloc, au contraire, montera, atteignant le bord inférieur du navigateur. Et cela ne faisait pas partie de nos plans.

Positionnement absolu en CSS

Sur l'image, le bloc est positionné de manière absolue, c'est à dire que le système de coordonnées est compté à partir du bord du navigateur. En remplaçant un seul mot, nous avons modifié la position du bloc.

Position : absolue ;

Il y a une particularité. Le positionnement absolu affecte également les éléments en ligne. Si vous définissez position: Absolute sur un élément en ligne, il se comportera comme un élément de bloc. Il s'agit d'un analogue de la propriété - display: block.

Ce n'est pas tout, l'élément "absolu" situé à l'intérieur du parent "relatif" change de point de référence de coordonnées et commence à se positionner à l'écart du parent.

position : relative

position : absolue ;

Un bloc avec la classe block-absolute se trouve à l'intérieur du parent block-jaune .

Bloc-jaune (
position : relative ;
remplissage : 10 px ;
couleur d'arrière-plan : #ffe70f ;
}

Puisque le bloc jaune a positionnement relatif, alors le bloc rouge avec un positionnement absolu est décalé par rapport au rouge des pixels spécifiés.

Bloc-absolu (
position : absolue ;
en bas : 10 px ;
gauche : 10px ;
couleur d'arrière-plan : #ed5b77 ;
}

Positionnement fixe

Lors du défilement de la page, un bloc avec position : fixe restera en place, généralement cette méthode est utilisée pour fixer la barre de navigation.

indice z

Résout l’ordre des blocs « absolus » qui se chevauchent. Nous voulons que le bloc rouge soit au-dessus du bloc jaune, puis nous spécifions z-index : 2 pour le rouge et z-index : 1 pour le jaune.

Rouge
Jaune

Bloc-rouge (
position : relative ;
indice z : 2 ;
couleur d'arrière-plan : #ffe70f ;
}

Bloc-jaune (
position : absolue ;
haut : 20 px ;
indice z : 1 ;
couleur d'arrière-plan : #ed5b77 ;
}

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 se superposer les uns aux autres, affiché en un point avec certaines coordonnées, fixées à emplacement spécifié, déterminer 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 spécifié avec une valeur négative, bande horizontale rouleau. Une règle similaire fonctionne avec top , mais nous en reparlerons bande verticale rouleau.
• 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. Ça vaut la peine d'ajouter propriété de largeur et le droit de valeur sera ignoré. 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 lorsque vous le faites défiler.

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 « cadres » sont générées automatiquement par utilisation simultanée 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'il 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.

Couvrez le riz en 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 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, tels que des info-bulles photo. 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 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 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 les retours à la ligne lors de l'appel de la fonction toolTip() sont faits pour faciliter la perception et ont 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 de fond */ couleur : #fff ; /* Couleur du texte */ width : 100% ; /* Largeur du calque */ ) Toutes les méthodes de capture d'un lion répertoriées sur le site sont théoriques et basées sur méthodes de calcul. 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. Depuis

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.

La définition de la propriété position sur relative 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 positive à gauche spécifie un décalage vers la droite à partir de 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écalé 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.

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 hêtres tapez la science

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 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'enfant, le système de coordonnées et la position changeront. élément enfant dans ce cas, il est indiqué 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