Salut tout le monde, bienvenue.
Aujourd'hui, nous allons parler des éléments de positionnement dans votre page Web.
Donc, essayer de mettre en page
votre page et votre codage sera probablement l'une des
choses les plus fastidieuses et potentiellement frustrantes que vous allez faire dans tout ce cours.
Et c'est l'une des raisons pour lesquelles j'ai quitté presque toute cette semaine pour
nous entraîner à exposer les choses sur votre page.
Les idées elles-mêmes sont très simples et simples, mais
c'est la mise en place, à mesure que vous ajoutez de plus en
plus à votre page, où les choses peuvent devenir un peu difficiles.
Commençons donc à parler des différents éléments de positionnement
, ou des différentes propriétés de positionnement, que vous pouvez utiliser, d'accord ?
Les quatre propriétés de position sont statiques, relatives, absolues et
fixes, et pour la plupart elles sont très différentes. La
façon dont ils fonctionnent ensemble, ou comment ils fonctionnent, est que chacun d'entre eux
peut également être modifié par des propriétés telles que top, right, bottom et left.
Donc, vous dites quel genre de position vous voulez que l'élément soit, et
ensuite vous pouvez dire, mais je veux que ce soit si loin du haut ou si
haut du bas, ou si loin de la gauche.
Commençons donc par statique, et la raison pour laquelle nous allons commencer par statique
est que vous l'avez déjà utilisé depuis le début.
C' est ce que nous appelons la valeur par défaut pour les éléments.
Si tu ne dis rien d'autre, ça va être réglé.
Comment cela fonctionne est que le navigateur va placer chaque élément
dans la prochaine position disponible.
Vous pouvez lui donner des valeurs telles que le haut, le bas, la gauche et la droite, mais
le navigateur va complètement l'ignorer.
Comment ça va marcher est quelque chose comme ça.
Laisse-moi voir si je peux rédiger ça ici.
C' est que tu as ton écran.
Et puis il est temps de commencer à ajouter des choses à votre page, et le navigateur va, oh,
eh bien c'est la portée donc ça va juste ici.
Et la portée de la prochaine, donc ça va juste ici.
Oh, elle a quelque chose qui est bloqué, donc je dois descendre ici.
Donc, comme vous l'ajoutez, il commence juste en haut, et fonctionne un chemin à travers, puis vers le bas.
Mais nous pouvons aller plus loin.
Nous pouvons changer la façon dont le navigateur positionne les choses, et
l'une des façons que nous pouvons faire est d'utiliser la position relative.
Et quand je dis relatif, je veux dire par rapport à lui-même.
Où est-ce qu'il irait ?
Ok, on va le faire un peu.
C' est, fondamentalement, très similaire à la position statique, mais
maintenant vous pouvez ajouter ces décalages.
Le nouveau positionnement, le nouvel endroit que nous mettons l'élément,
il n'affectera aucun de ses voisins.
Au lieu de cela, ce qu'il peut faire est de laisser des trous
où le navigateur pensait qu'il aurait dû être en premier lieu.
Habituellement, les éléments relativement positionnés sont utilisés comme conteneurs ou
blocs pour d'autres éléments.
Laissez-moi vous montrer un autre exemple rapide.
Allumez ça.
J' ai ma fenêtre de navigateur, et disons que je suis sur le point de mettre un élément de span, et
ça va aller juste là.
Au lieu de cela, si vous dites que la position est relative,
et que vous lui donnez une sorte de chiffre comme le top 10, au lieu de le placer juste ici,
ça va aller en dessous où il devrait être.
Encore une fois, nous ajoutons juste des chiffres pour déplacer les choses d'où elles
allaient normalement.
La position suivante est ce que nous appelons absolu.
Et celui-ci peut vraiment confondre les gens quand vous le démarrez pour la première fois,
parce que le navigateur, au lieu de le mettre dans la prochaine position disponible, il
ignore tous les éléments, et regarde vraiment juste le conteneur principal dans lequel il était.
Dans ce cas, nous allons montrer un exemple avec le navigateur.
Les autres éléments de la page se comportent comme s'il n'existait même pas.
Et ce que cela peut conduire, c'est que vous pouvez finir avec un élément au-dessus d'un autre.
Alors, essayons ça.
J' ai mon navigateur. J'
ai pas beaucoup de place, ici.
Alors, juste ici. Et disons que j'ai un div,
et j'ai décidé que c'est absolu, et ça devrait être 100 en bas du haut, et
peut-être 100 en plus.
Donc ça va juste ici.
Très bien, bien, si on faisait un rapport,
l'élément suivant irait en dessous.
Mais si on a deux valeurs absolues, la prochaine qui se présente va aller,
encore une fois, juste au-dessus de ça.
D' accord, la position finale dont je vais parler s'appelle fixe.
Et la position fixe est relative à la fenêtre du navigateur.
C' est ainsi qu'ils sont capables de créer ces pages,
où parfois vous obtenez ce pop-up, et vous ne pouvez tout simplement pas l'obtenir pour disparaître.
Vous continuez à défiler et à défiler, et il vous suit.
Eh bien, ce qu'ils ont fait c'est qu'ils ont utilisé cette position fixe.
Cet élément ne va pas se déplacer même si la fenêtre est défilée.
Juste pour que vous sachiez si vous utilisez un ancien navigateur, ou si vous essayez de concevoir
pour Internet Explorer 7 ou 8, cela ne fonctionne que si vous utilisez un DOCTYPE HTML5.
Donc encore une fois quand vous pensez à la position fixe pensez à des boîtes pop-up
qui ne disparaîtront pas.
Ou vous pourriez aussi le considérer comme quelque chose de plus utile quand vous êtes
sur une page, et vous pouvez avoir cette barre de navigation qui est en haut, et lorsque
vous faites défiler la page, vous n'avez pas à faire défiler vers le haut pour
voir la barre de navigation, car elle est toujours là.
Alors allons de l'avant et regardons un exemple où j'ai quelques
éléments différents qui utilisent les différentes propriétés de position.
Ok, je vais te montrer une page où je suis entré, et
j'ai mis quelques éléments.
Juste deux divs, et quelques paragraphes.
Et juste pour commencer, je leur ai donné un style de départ, juste pour qu'
on puisse les distinguer.
Pour notre div, je position relative, je lui ai donné une hauteur, une largeur et une bordure.
Pour les paragraphes, je lui ai donné une bordure d'une couleur différente,
lui ai donné un haut et à gauche, et je l'ai laissé comme position statique,
parce que c'est la position par défaut qu'il serait toujours.
Je veux te montrer à quoi ça va ressembler dans le navigateur.
Donc, si vous regardez, vous pouvez voir que j'ai deux divs, un ici et en bas, et
j'ai mes trois paragraphes.
Un, oups, désolé.
Un, deux, trois.
La première chose que je veux souligner est que cela ne ressemble pas exactement à la façon dont certains d'entre
vous peuvent s'attendre à ce qu'il ressemble, ou même exactement de la même façon que certains d'entre vous le voient si
vous le chargez sur votre navigateur.
Au lieu de mettre ce paragraphe en haut,
il est en fait un peu poussé vers le bas.
Même chose pour le B et le C.
La raison qui se produit est que tous les navigateurs ont des valeurs par défaut différentes pour
l'endroit où le paragraphe doit être positionné.
Alors, laissez-moi faire défiler ici une seconde.
Je vais descendre.
Et vous pouvez voir qu'il y a ce code bizarre juste ici qui dit,
-webkit- margin-before et -webkit-margin-after.
Ceci est un exemple de certaines pseudo-classes qu'ils ont utilisées.
Donc, je ne veux pas que ces différentes choses par défaut entrent en jeu.
Alors je vais aller de l'avant et me débarrasser d'eux.
Après que je les ai commentés et que je les ai commentés, je me rafraîchis, et
maintenant nous avons nos A, B et C.
Donc encore une fois, A, B et C, sont tous relatifs.
Vous dites au navigateur, il suffit de le mettre dans le prochain espace disponible.
Voyons donc ce qui va se passer maintenant si je change mon élément
de relatif à statique, ou désolé, de statique à relatif.
Et vous pouvez voir qu'ils ont déménagé, et
la raison pour laquelle ils ont déménagé est que je lui ai donné les valeurs du top 100 et laissé 100.
Descendez, poussez dessus.
Si je change ça à 50.
Oups, 59, ça marchera.
Vous pouvez voir ne bouge pas autant.
Donc, statique juste aller en premier lieu que vous pouvez.
Parenté, allez à la première place que vous pouvez, mais allez-y,
vous pouvez le dire si vous voulez qu'il bouge un peu dans les deux sens.
Le prochain que nous allons faire est absolu.
Peut-être.
Voilà, alors maintenant je veux que vous remarquiez quelque chose.
Que A et ce B, ils sont au-dessus de l'autre.
Parce que vous avez dit, je veux que vous soyez 100 pixels vers le bas et
59 pixels sur le côté de l'élément conteneur.
Dans ce cas, c'est cette div.
Donc c'est bizarre car ils sont juste au-dessus de l'autre, et tout est mélangé ensemble.
Il y a des circonstances où vous voudrez que les choses soient au-dessus de l'autre.
Peut-être que l'un d'eux sera visible, et
l'un d'eux sera caché, et ils vont changer dynamiquement.
Mais c'est ce qui se passe avec l'absolu.
Maintenant, si je fais défiler, je vais rendre cet écran un peu plus petit, et je fais défiler,
vous pouvez voir que le A et le B, ils font défiler.
Et, bien sûr, j'ai fait cet exemple parce que je voulais vous montrer que si je passais
à corrigé maintenant, au lieu de dire position de l'élément par rapport
à son parent, en disant position cet élément par rapport à l'ensemble du navigateur.
Donc maintenant tout est au-dessus de l'autre, et si j'essaie de faire défiler.
Ça ne marche pas.
Ça reste là, d'accord ?
Encore une fois, c'est statique, relatif, absolu et fixe.
Et je veux que vous jouiez avec ça, et que
vous connaissiez vos options, avant de commencer à étaler votre code à la main.
Maintenant, une des choses que je vous ai montrées est qu'il est possible que
plusieurs éléments soient placés dans la même position ou les uns au-dessus des autres.
Et il y a un moyen de faire face à ça si vous n'aimez pas la commande qu'
ils arrivent.
Et ça s'appelle l'indice Z.
L' index Z est juste, fondamentalement, juste une valeur de nombre, il est soit positif ou
négatif, qui indique au navigateur votre ordre d'empilement.
Donc si vous avez quelque chose et que vous êtes vraiment sûr de vouloir vous assurer qu'il est toujours au
sommet, vous allez de l'avant et mettrez quelque chose comme 100 dessus.
Si vous ne vous en souciez pas, vous pourriez lui donner 100 négatifs.
Et c'est ainsi que les gens peuvent aller de l'avant, et
positionner les éléments pour qu'ils soient un peu plus dynamiques plus tard,
lorsque nous ajoutons du JavaScript ou des choses différentes comme ça.
Donc, l'index Z est quelque chose avec lequel pas beaucoup de gens code, mais
c'est vraiment utile lorsque vous utilisez l'élément inspect,
s'il y a quelque chose ci-dessous, et que vous voulez voir à quoi il ressemble sur le dessus.
Alors allons de l'avant et révisons.
Positionner votre élément est la clé pour créer les mises en page que vous
souhaitez avoir.
Et cela est particulièrement important si vous êtes préoccupé par le fait que votre site semble bien sur
un petit écran, un grand écran, etc.
Donc une bonne planification va rendre cela beaucoup plus facile pour
vous quand vient le temps de coder votre page.
Mais vraiment, la chose la plus importante que vous pouvez faire maintenant est d'aller en ligne, de trouver ces
tutoriels ou des références différentes où ils parlent de positionnement, et de jouer avec
jusqu'à ce que vous vous sentiez un peu plus à l'aise avec le fonctionnement de chacun de ces tutoriels.
Bonne chance.