Quelle valeur la propriété position ne peut-elle pas prendre ? Positionnement des éléments en CSS. Az et hêtres de type science

Comme l'auteur de l'article, j'ai abordé beaucoup de choses en CSS au hasard et j'en ai raté encore plus. Surtout le temps. Et si j'avais immédiatement compris les principes de choses comme le positionnement et la flottaison, alors tâches simples aurait en effet été simple dès le début. À cette fin, il n'y a souvent pas assez d'endroits où les conflits et les anomalies de ces langages de programmation qui ne nous sont soudainement pas enseignés depuis l'enfance nous sont expliqués entre nos doigts. Eh bien, ils ne sont pas clairs pour nous sur un plan intuitif, et alors ? Oui, et les aides ne sont pas toujours lues.

Si vous avez la même histoire, alors c'est votre lecture du soir.

Une des révélations qui m'est venue après sa lecture a été la compréhension du fonctionnement du positionnement, notamment la différence entre absolu et relatif (absolu, relatif). Si vous lisez jusqu’au bout, vous saurez exactement quand et comment chacun fonctionne. Tout est présenté ici à l'aide d'exemples de listes et d'images.

Cinq valeurs de positionnement

En CSS, nous avons une liste de cinq valeurs de position pour les éléments du bloc div :

1. Statique - statique.
2. Relatif - relatif.
3. Hériter - hérité.
4. Fixe - fixe.
5. Absolu - absolu.

Dégageons un peu la route en supprimant hériter, tout simplement parce que cette propriété de positionnement ne nécessite pas d'analyse supplémentaire. Il indique à l’élément d’hériter des propriétés de son parent et c’est tout. Et dans les anciennes versions d'Internet Explorer, cela n'est pas du tout pris en charge.

Par défaut, le positionnement est défini sur statique. Tout élément avec un positionnement statique sera là où il est attendu, dépendant entièrement de la structure du HTML.

Maintenant fixé. C’est une telle ancre. Lorsqu'ils sont équipés de cette valeur, les éléments resteront là où nous les plaçons et ne bougeront pas même lorsqu'ils défileront. Ceci est souvent utilisé pour geler les barres latérales de navigation, ce qui est bien sûr terrible pour le contenu.

Nous avons donc déterminé les trois valeurs de positionnement et pouvons les considérer comme compréhensibles. Tout simplement parce que leur fonctionnalité ne comporte ni répétitions ni variations. Il reste des choses intéressantes - absolu Et relatif. Examinons-les individuellement, puis voyons comment ils peuvent être utilisés ensemble. Et aussi quoi des résultats intéressantsça peut donner.

Positionnement absolu

Positionnement absolu vous permet de retirer un objet du flux normal du document et de le coller à un endroit précis de la page. Créons une liste simple - une liste non ordonnée.

• QUATRE

Comme nous le savons, ses éléments sont déjà dans la valeur statique, automatiquement. Cela signifie qu'ils s'inscrivent dans le flux des autres éléments du document où ils sont placés selon sa structure html. Voyons maintenant ce qui se passe si vous attribuez l'un des éléments de la liste absolu avec des coordonnées nulles.

>ul li:ntième-enfant(4)(
position : absolue ;
gauche : 0 ; haut :0 ;)

Comme vous pouvez le constater, il est exclu du flux général et placé dans le coin supérieur gauche de la fenêtre du navigateur. Notez qu'un élément positionné de manière absolue ne se soucie pas de savoir s'il y en a un autre à cet endroit ou non. Il sera toujours placé selon les coordonnées.

Nous avons donc besoin d’un positionnement absolu lorsque nous devons placer un élément exactement à l’endroit de l’écran où nous voulons le voir. En conséquence, sa position est mesurée par des retraits en haut, à droite, en bas et à gauche du bord de la fenêtre.

Par exemple, plaçons le même quatrième élément de liste avec une indentation de vingt pixels à gauche et vingt en haut.

ul li:ntième-enfant(4)(
position : absolue ;
gauche: 20 pixels ; haut: 20 px ;)

Déplacé un peu vers le bas et vers la droite. Et pour confirmer ce qui a été dit selon lequel un élément à positionnement absolu ne fait aucune différence sur la localisation des autres, donnons-lui des coordonnées qui assureront une collision uniforme.

ul li:ntième-enfant(4)(
position : absolue ;
gauche: 60 pixels ; haut: 80 px ;)

En conclusion, notons le comportement des éléments restants de la liste. Lorsque le quatrième est retiré du flux, les autres sont automatiquement alignés dans la file d'attente comme s'ils n'y étaient pas : le troisième est immédiatement suivi du cinquième. Souvenons-nous-en et utilisons-le à notre avantage.

Positionnement relatif

Le positionnement relatif fonctionne de la même manière que le positionnement absolu : en donnant à un objet sa position à l'aide des coordonnées haut, droite, bas et gauche. La seule différence est le point de départ : la position du point de coordonnée zéro. Pour un positionnement absolu, c'était le bord de l'écran du navigateur. Et pour le proche ?

Voyons:

ul li:ntième-enfant(4)(
position: relatif;
gauche: 0 pixels ; haut: 0 px ;)

• QUATRE

Comment ça? Le quatrième point restait à sa place dans le flux des éléments. En effet, le point de départ de ses coordonnées n'est plus le bord de la fenêtre du navigateur, mais l'élément qui le précède dans le flux. Il est aussi son parent.

Or, si nous modifions la position de notre sujet expérimental de vingt pixels, nous évaluerons clairement le résultat d'une telle relation.

ul li:ntième-enfant(4)(
position: relatif;
gauche: 20 pixels ; haut: 20 px ;)

Cet extrême peut être utile dans des situations réelles. Par exemple, lorsque nous ne voulons pas jeter un élément, mais que nous voulons jouer en le plaçant sur d’autres. Notez cependant que le positionnement relatif ne se soucie pas des éléments inférieurs de la même manière que le positionnement absolu. Mais ici, ils ne remplacent plus ceux qui sont partis.

Mettre tout cela ensemble

Maintenant que nous avons appris règles de base comportement des éléments HTML avec absolu et positionnement relatif via CSS, nous créerons un ensemble complet et exemple clair le travail de tout cela.

HTML

Commençons par créer un bloc HTML de la classe « photo » et insérons-y immédiatement une image de 200x200 pixels.

Il est maintenant temps de passer à l'édition de notre CSS.

CSS de base

Tout d’abord, changeons l’arrière-plan en sombre. Ensuite nous ajouterons une photo styles de base: Faisons un cadre pour cela et accrochons quelques ombres.

corps (arrière-plan : #69C ; )

Photo (
bordure : 5px blanc uni ;
hauteur : 200px ; largeur : 200 px ;
marge : 50px automatique ;

/*ombres difficiles mais sympas*/
-kit Web-

ombre de la boîte : 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
}

Eh bien, en général, voici notre photo. Rien de spécial, mais le terrain d'entraînement a été créé.

Accrocher une bande de ruban adhésif

Disons-le ainsi : nous voulons donner l'impression que les photos sont collées au mur avec des morceaux de scotch. Pour ce faire, nous devons montrer ce que nous avons déjà appris et ajouter un pseudo-élément.

Premièrement, pour créer notre film, nous utilisons le pseudo-élément « :before ». Ses paramètres CSS indiqueront à la bande une hauteur de vingt pixels et une longueur de cent pixels. De plus, avec un fond blanc auquel on attribue une opacité de cinquante pour cent, c’est du film. Eh bien, Tenya, où serions-nous sans elle ?

Photo :avant (
contenu : « scotch » ;
hauteur : 20px ;
largeur : 100 px ;

}

Oui, ici le film ne collera à rien d'autre qu'à lui-même...

Il est évident que nous avons des problèmes avec le positionnement du pseudo-élément. Essayons de corriger la situation en utilisant le positionnement relatif.

Photo :avant (
contenu : « scotch » ;
hauteur : 20px ;
largeur : 100 px ;
arrière-plan : rgba(255 255 255,0,5) ;

position: relatif;
haut: 0 pixels ; gauche: 0 pixels ;

Webkit-box-shadow : 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow : 0px 1px 3px rgba(0,0,0,0.4);
box-shadow : 0px 1px 3px rgba(0,0,0,0.4);
}

Super. Quel effet...

Comme vous pouvez le constater, nous n’avons pas résolu le problème. Eh bien, puisque le positionnement relatif n'a pas fonctionné, allons dans la direction opposée et essayons l'absolu.

Photo :avant (
contenu : « scotch » ;
hauteur : 20px ;
largeur : 100 px ;
arrière-plan : rgba(255 255 255,0,5) ;

position: absolu;
haut: 0 pixels ; gauche: 0 pixels ;

Webkit-box-shadow : 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow : 0px 1px 3px rgba(0,0,0,0.4);
box-shadow : 0px 1px 3px rgba(0,0,0,0.4);
}

Mais cela est plus proche du sujet.

Finalement, la bande a pris la forme commandée. Mais pour l'instant il s'ennuie dans un coin. Un changement de coordonnées s'impose immédiatement afin de le déplacer là où nous en avons besoin. Mais ce n'est pas une solution : la bande se maintiendra à un certain point et commencera à se déplacer en fonction du changement de taille de l'écran.

Eh bien, nous avons essayé à la fois le positionnement relatif et absolu. Mais nous ne sommes encore satisfaits ni de l’une ni de l’autre comme solution.

Quelle est la prochaine étape ? Et par exemple, l’histoire du positionnement absolu des éléments n’est pas complète. Vous voyez, le coin supérieur gauche de l'écran n'est pas toujours point zéro coordonnées pour un élément positionné de manière absolue. Au lieu de cela, notre pseudo-élément « absolu » sera orienté par au premier ancêtre non statique. DANS dans ce cas- d'après la photo.

Qu’en retirons-nous ? Beaucoup : nous pouvons utiliser le positionnement absolu pour la bande. Mais avant cela, il faut changer quelque chose chez son parent, dans la photo. Et comme nous ne voulons pas que la bande se déplace arbitrairement sur la photo en fonction de la résolution de l’écran, nous lui appliquerons un positionnement relatif.

Photo (
bordure : 5px blanc uni ;
hauteur : 200px ;
largeur : 200 px ;
marge : 50px automatique ;
position: relatif;

-moz-box-shadow : 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
ombre de la boîte : 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
}

Photo :avant (
contenu : « scotch » ;
hauteur : 20px ;
largeur : 100 px ;
arrière-plan : rgba(255 255 255,0,5) ;
position: absolu;
haut: 0 pixels ; gauche: 0 pixels ;

Webkit-box-shadow : 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow : 0px 1px 3px rgba(0,0,0,0.4);
box-shadow : 0px 1px 3px rgba(0,0,0,0.4);
}

Ainsi, un pseudo-élément à positionnement absolu a choisi le coin supérieur gauche du premier des ancêtres non statiques comme point de référence pour ses coordonnées. A savoir, l’angle de la photo correspond exactement à cette description. Ainsi, la bande sera toujours collée à ce coin, même si la taille de la fenêtre du navigateur change.

Maintenant que nous avons trouvé le point de départ, nous pouvons déplacer la bande vers l'emplacement souhaité en ajustant les valeurs de gauche et du haut. Notez la valeur négative pour le point supérieur. En regardant le résultat, vous comprendrez pourquoi. La valeur de gauche est définie pour centrer la bande horizontalement. Quelqu'un avec une « calculatrice instantanée » montrera clairement comment cela est calculé.

Photo :avant (
contenu: "";
hauteur : 20px ;
largeur : 100 px ;
arrière-plan : rgba(255 255 255,0,5) ;
position: absolu;
haut: -15 pixels ; gauche: 50 pixels ;

Webkit-box-shadow : 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow : 0px 1px 3px rgba(0,0,0,0.4);
box-shadow : 0px 1px 3px rgba(0,0,0,0.4);
}

Comme nous pouvons le voir sur l'image finale, la combinaison du positionnement absolu et relatif nous a donné exactement ce dont nous avions besoin pour mettre en œuvre l'effet recherché et comprendre le fonctionnement de ces deux propriétés.

Consultez également Tinkerbean. Essentiellement, il s’agit d’un générateur utile de codes pour divers effets.

Conclusion

Placer des éléments de bloc peut être une tâche très difficile sans maîtriser notions de baseà propos de lui. Cependant, vous ne devez garder que trois éléments à l’esprit afin d’appliquer et de combiner leurs paramètres dans le temps.

La première est que le positionnement relatif vous permet de vous aligner sur un point de départ précis. La seconde est que vous pouvez également configurer par rapport au premier ancêtre non statique, et pas seulement au bord de la fenêtre du navigateur, comme c'est le cas avec la valeur "poste : aucun". Et enfin : ni le positionnement relatif ni absolu d'un objet n'affecte les objets statiques et fixes qui l'entourent. Rappelons-nous dès le début de l'article : les éléments en position absolue sont supprimés du flux et les éléments relatifs prennent la position des autres.

Remarques

• Les téléphones mobiles et tablettes obsolètes ne perçoivent pas bien le paramètre de positionnement "fixé". Ou plutôt, ils ne s’en aperçoivent pas. Les menus auxquels il est affecté glissent sur l'écran avec le contenu comme s'ils étaient "statique". Avec l'avènement d'iOS 5+, tout est revenu à la normale, mais pas avant.
• La façon dont tout ce qui est écrit ici était perçu, par exemple, par le septième Internet Explorer— Je ne veux même pas en discuter. Il y avait encore moins de désir de réfléchir à la façon de pirater le CSS pour cela. Par conséquent, pour la goule, j'ai fait des captures d'écran de toute la beauté et les ai codées en HTML avec des constructions telles que :

  
  Сюда тупо скрин для Эксплорера.
  

  
  Et voici le code complet pour les navigateurs normaux.
  

  Donc, si vous n’êtes pas trop paresseux pour publier vos solutions uniquement en utilisant CSS, alors les commentaires sont à votre service. Sauvons le monde.

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. Repos Propriétés CSS, à savoir left , top , right et bottom sont destinés à spécifier les distances par rapport à gauche, top, droite 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 left , top , right et bottom .

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, sous-sol fixe site et blocages « 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 :