Mission #6 - Explique moi... les positions!

Bonjour à tous! Il est temps pour nous de débuter une nouvelle mission! Petit changement cette fois-ci, car il n'y a pas de code à écrire à proprement parler! En effet, cette mission consiste à expliquer, avec vos propres mots une fonction très utilisée en CSS: le position!
Aucune contrainte donc dans cette mission: expliquez du mieux que vous le pouvez comment utiliser les position!

Quelques pistes

Si vous ne savez pas où commencer, voici quelques pistes! Vous devez bien sûr parler des différents TYPES de position (fixed, absolute et relative), mais vous pouvez aussi parler de top, bottom, left et right, et comment ils affectent votre objet. Vous pouvez aussi penser aux relations entre les différentes sortes de position (relative et absolute). Et si vous avez la foi, vous pouvez bien-sûr parler du z-index!

Bonne chance! =D

Bonjour .
euh ...
et ben ...

position : fixed déjà , bah c'est quand l'élément ( en général une image ) ne bouge pas
par exemple si on scroll la page ( on descend ) l'image bouge pas
donc si je met un trèèèèès grand texte et une image en fond quand on continuera a lire le texte l'image le bougera pas avec l'écran
( ça peut être perturbant , rendre un effet , etc , à vous de voir ce que vous voulez en faire )

position : absolute , j'ai un peu du mal a l'expliquer , mais c'est par rapport à l'ensemble de la zone de texte qu'est placé votre élément .
du coup , si on dit qu'on le veut décaler de 20 pixels à droite , et bah il sera décalé depuis le fin fond de la droite de la page

contrairement au position : relative qui lui décalera de 20 pixels mais par rapport à là ou il aurait du être d'après là ou vous l'avez écrit .

ensuite , position : top ...
supposons que j'ai une image plus grande que le cadre dans laquelle j'aimerais la mettre et que je ne peux absolument pas changer ce cadre .
et bien position : top placera l'image à partir du haut de l'image ( et donc tronquera le bas )
de manière équivoque , position : bottom tronquera le haut en le plaçant par le bas et il en est de même pour left et right .
position : center permet de moins tronquer mais de tronquer des deux cotés
ainsi , une image avec position : top center ; sera affichée par son haut avec le bas tronqué et les cotés un peu tronqué .
il vous faut choisir ceci par rapport à ce que vous voulez montrer de votre image .

( tout ceci n'est bien sûr valable que si vous n'avez pas envie de redimensionner votre image avec un quelconque logiciel , etc )
j'espère avoir été explicite , désolé si j'ai oublié certains aspects de cet attribut :)

Edit : j'avais oublié le z-index
il s'agit d'un numéro qui indique la priorité du plan de l'element , c'est à dire que deux éléments avec z-index : 0 et l'autre 1 seront superposés mais le seront dans l'ordre croisant ( l'indice le plus grand en premier plan )

Coucou Sivmatt! ^^ Merci de ta participation! =D
Je me permets juste de "corriger" quelques uns de tes dires, mais ne le prend pas mal, c'est surtout pour que tu apprennes de tes erreurs! ^^

Le position: fixed n'est pas seulement pour une image. Tu as bien compris son utilisation, mais je voudrais surtout que tu ne penses pas que c'est réservé aux fonds ou aux images! ^^ N'importe quel élément peut être fixed! ^^

Pour le position: absolute, ce n'est pas par rapport à l'ensemble de la zone de texte, mais par rapport à l'élément en position: relative le plus proche, ce qui par défaut est l'écran. Il faut faire attention à 4a, car si tu as effectivement un position absolute au sein d'une zone de texte, mais que cette dernière n'est pas en position: relative, ce n'est pas par rapport à elle que ton position: absolute va se placer! ^^

Tu as cependant très bien exprimé comment marchaient ces trois choses, mis à part ces pettes confusions! ^^

Quant au top, bottom, left et right, ne s'écrivent pas position: top; position: bottom; position: left; et position: right;, mais top: XX; bottom: XX; left: XX, et right: XX; le XX pouvant être une distance en px, em ou encore %. Par exemple: top: 40px;
Il semblerait aussi que tu te sois trompé entre le background-position et le top, bottom, left et right, puisque ces derniers te permettent de placer l'élément en fonction de ce que tu as utilisé dans le position: ...; mais comme tu l'as exprimé, en fonction du haut, du bas, etc. Je pense que d'autres participants à la missions l'expliqueront très bien par la suite! ^^
Du coup, il n'y a pas de position: center, vu que c'est utilisé dans background-position, plutôt! ^^

Et je n'ai rien à redire par rapport à ton explication du z-index! ^^

Merci encore de ta participation!

ah oui , j'ai confondu avec background-position en effet x)
pour position : fixed , je sais que ce n'est pas uniquement pour les images , j'ai d’ailleurs dit " l'élément ( en général une image ) "

et bien de rien , ça m'a fait plaisir ^^
pis ça me fait pas de mal un rappel , je commençait à rouiller xD

Bonjour !
Euh... Je vais essayer d'expliquer selon mes propores mots, je ne pense pas être très claire, c'est déjà si vague dans ma tête :s

I/ L'application en CSS

Alors, il y a plusieurs balises CSS qui permettent de déterminer la position d'un objet, d'un texte, d'un bloc etcetera...

Pour pouvoir les placer, il faut connaître le nom anglais de la droite, gauche, haut, bas, qui sont respectivement en anglais : right, left, top, bottom. On peut également fixer cette position avec le CSS

Code:

 position: fixed

Il existe ensuite deux styles de position : la position absolue et la position relative.

1) La position absolue

Son code CSS est

Code:

 {position: absolute}

. Elle s'applique par rapport au coin supérieur gauche de la fenêtre. (top=0 left=0)

Pour les balises top et left il y a trois options :
-L'auto, qui applique la valeur par défaut
-Les pixels, qui règlent manuellement avec un pourcentage en pixels (px)
-Le pourcentage, qui règlent manuellement avec un pourcentage (%)

Pour appliquer une position absolue à un texte vous pouvez utiliser les balises SPAN ou DIV.

2) La position relative

Son code CSS est

Code:

 {position: relative}

. Elle s'applique par rapport à d'autres éléments de la page, par exemple un codage Html.
Cette propriété est valable pour tous les types de balises.

II / Les attributs de ces positions

Il existe plusieurs attrbuts à ajouter à ces positions de bases, comme :
-Visibility : Il détermine si l'élément est visible ou pas.On peut choisir entre •Visible et Hidden.
-Z-index : Il va définir l'empilement des objets des feuilles de style CSS, si l'un est par dessus l'autre (superposition).


Je crois que c'est tout pour mon charabia. ^^

J'adore les positions

N'alors en résumé ce que j'ai compris des positions c'est que :

- la position relative : c'est la position la plus classique des éléments. Chaque élément se placera en fonction de ceux qui le précèdent et le contiennent. On peut facilement centrer un élément avec cette position, dans la mesure où on a indiqué sa dimension, en utilisant le "margin: auto".

- la position absolute : c'est une position plus complexe en apparence mais dont je me sers beaucoup pour placer mes éléments sans problème d'interférence entre eux puisque un élément en absolute n'impose rien aux élément qui le suivent. Par contre, il respecte ceux qui le précède. Un bloc relatif de 200px de haut suivit d'un bloc absolute aura sa place et celui en absolute sera en dessous. Par contre, si un autre bloc relative ou absolute se trouve APRES, il se placera sans tenir compte de l'élément mit en absolute avant lui, et sera donc par dessus.
On peut utiliser les "top : 0 / left: 0" sur un bloc en absolute mais ce "top" et ce "left" ne correspondent pas forcément aux extrémités de la page, ni même au bloc contenant immédiat. En fait, j'ai pas encore saisi exactement sur quel contenant il s'aligne Je crois qu'il va tenir compte du contenant ayant une position "relative" indiquée, donc ça peut être le contenant immédiat ou deux ou trois blocs au dessus, voire plus, tout dépend.
On ne peut pas utiliser la valeur "auto" pour centrer un bloc en absolute, on est obligé d'utiliser une autre méthode pour le centrer à tout les coups pour les écrans (que j'ai expliquée dans un tuto de page d'accueil html), il faut faire un left: 50% puis un margin-left négatif équivalent à la moitié de la largeur totale de l'élément.

- la position fixed : elle possède les mêmes propriétés que l'absolute, c'est à dire que les éléments suivants ne tiennent plus compte d'un élément fixed, mais en plus cet élément ne tient pas compte non plus des éléments avant lui. En gros un élément placé en fixed est seul dans sa bulle x). Il se place par rapport à l'écran et non par rapport à des blocs de page internes. De ce fait, il ne bouge pas, puisque seule compte pour lui la fenêtre totale de notre écran.
Tout comme l'absolute, on peut lui indiquer les valeurs top / left / bottom / right, et il est d'ailleurs préférable de toujours placer cet élément fixed avec une valeur comme ça pour ensuite le décaler, ainsi on est sûr qu'il est au même endroit pour tout le monde, peu importe la taille d'écran. D'ailleurs, ça complique aussi son positionnement, puisque une marge en pixel ne le placera pas forcément au même endroit pour tout les visiteurs. C'est pourquoi il faut toujours se baser sur un placement commun à tous, un repère, comme le bord (donc valeur 0) ou le milieu (donc valeur 50%).

Il est important de noter aussi que seul un élément ayant une position indiquée peut avoir une propriété de "z-index", ce qui permet de le placer au dessus ou en dessous des autres. Plus la valeur de z-index est haute plus l'élément est au dessus des autres.

Valà en gros x)

Okhmhaka a écrit:On ne peut pas utiliser la valeur "auto" pour centrer un bloc en absolute, on est obligé d'utiliser une autre méthode pour le centrer à tout les coups pour les écrans (que j'ai expliquée dans un tuto de page d'accueil html), il faut faire un left: 50% puis un margin-left négatif équivalent à la moitié de la largeur totale de l'élément.

J'en profite pour proposer très rapidement une petite astuce pour ceux qui ont la flemme de calculer la moitié de la largeur de l'élément (oui oui, les grosses feignasses quoi) et assez utile si on met une largeur en pourcentage.

Quand on est en position absolute pour centrer on peut aussi :
- définir la largeur de l'élément (width)
- lui mettre margin: auto (comme pour un centrage de bloc normal)
- mettre left: 0; et right: 0;

Un petit exemple :



Cela fonctionne aussi pour un centrage vertical (fixer une hauteur, et ensuite mettre margin auto ainsi que top: 0 et bottom: 0).
Pour ceux qui veulent en savoir plus : Absolute Horizontal And Vertical Centering In CSS

Exemple avec centrage vertical :

Ah pas mal, je savais pas ça, je calculais xD. Merci pour l'info' du coup !

Pour infos, j'avais fait un mini tuto pour expliquer les positions.

https://www.never-utopia.com/t42996-partie-2-etape-7-les-positions-et-le-z-index

Hello, je suis nouveau et je cherche un peu "où je dois aller" mais je me dirigeais donc vers cette petite zone qui m'a l'air bien sympathique...

Je ne sais pas si je dois répéter ce que les autres ont si bien expliquer, mais en tout cas je remercie beaucoup Nihil Scar Winspeare pour son astuce sur le centrage vertical que je ne connaissais pas du tout! Et que je vais probablement plus cesser d'utiliser maintenant!



Encore un grand merci, et je file lire tous les petits tutos utiles :)

Ho je connaissais pas non plus la technique de Nihil ! (ni celle d'Okhmaka) Ca risque d'être très très utile...
Et sinon récemment je me suis confrontée à une petite colle:
centrer horizontalement un bloc dont la largeur est en pourcentages de la largeur de l'écran (20%) contenant une image dont la largeur est 100% de celle du bloc, et que cette image dépasse du bloc en question... ha, j'ajouterais qu'elle soit cliquable !
J'ai fini par trouver une astuce... Mais si vous avez un peu de temps à perdre je veux bien savoir comment vous auriez fait !

Il y a d'autres techniques dans le même genre si tu cherches un peu... Je ne les ai pas toutes en tête, mais c'est quand même bien pratique tout ça. *-*
Les positions c'est quand même bien pratique

Par contre je n'ai pas très bien compris ta petite colle >-<... Enfin, je ne dois pas bien saisir l'idée car je ne vois pas le problème qu'on pourrait rencontrer ;___;

Wouaaah je vais chercher dans ce cas ! ^^

et quant au problème... hum, bonne question, qu'est-ce qui a bien pu me poser problème ?! Je vais chercher ça x)

Edit: le problème c'est moi. effectivement je me suis pas mal compliqué la vie pour rien ! Enfin la colle persiste, reformulée !
L'image en question doit être en position:absolute... C'est là que ça devient galère ^^'

Je... Comprends toujours pas ;____;

Tiens, je met sous hide une réponse, j'ai peut-être mal compris x)

Hello.

Bon alors j'ai mis… 2 mois pour venir poster ici. C'est pour dire à quel point les positions et moi c'est une grande histoire d'amour u_u. Mais en dehors de ça, je me devais de participer ! Ne serait-ce que pour dire comment je comprends le tout.

Tout d'abord la position « fixed » ma préférée :3, la plus facile à comprendre et utiliser surtout. En fait c'est dernière c'est pour afficher un élément sur la page qui ne bouge pas. C'est souvent le cas pour la barre de navigation par exemple. On a pas à chercher midi à quatorze heures c'est comme ça. C'est en ça que je la trouve 'simple'.

Après on a la position « relative », c'est la position 'bien pratique' qui me permet d'utiliser le z-index et pour positionner mes éléments. Enfin c'est la position qui pour moi ne change pas grand-chose au « sans position » mais qui permet quand même de déplacer les éléments comme on veut et surtout de les superposer.

Et enfin la position « absolute », c'est la grande question. Pas compris, je sais pas m'en servir et difficile.

Mais, parce qu'il y a un mais. Jaja (par un concours de circonstance) m'a fait un bref descriptif de la position absolute. Et depuis j'ai tout compris *-* Je l'aime, j'en use, je la trouve pratique, utile et surtout très très facile d'utilisation. Comme quoi il suffisait d'une explication en coin de CB pour me faire comprendre cette petite résistante. Finalement, je m'en sers à toutes les sauces ou presque maintenant et je suis contente d'enfin la comprendre ! Du moins en partie x). La véritable chose qu'il y a à savoir c'est que la position absolute ne prend pas en compte les blocs qu'il y a avant elle. Donc pour positionner on le fait manuellement mais on a pas de mauvaise surprise à l'arrivée. C'est son grooooos point positif *-*

Bref voilà. Maigre participation mais ce n'est que mon ressenti :3