CSS à l'état naturel : Google Maps

Laissez-moi vous montrer un exemple de positionnement CSS en z-index à l'état naturel : Google Maps. Probablement, la plupart d'entre vous avez utilisé Google Maps ou une sorte de plans en ligne avant, pour vous aider à trouver ce que vous cherchiez. Ces outils sont vraiment utiles ! On peut naviguer, zoomer en avant, zoomer en arrière et chercher des choses. Donc, comme je suis à Barcelone pour le moment, je vais chercher la Sagrada Familia, qui est cette magnifique cathédrale. C'est en fait du HTML, du CSS et du JavaScript. Laissez-moi vous montrer tous les z-index qui sont ici. Tous les éléments différents qu'on voit, on tous été positionnés en utilisant le CSS pour être les uns sur les autres, et ils utilisent le z-index d'une façon très particulière pour s'assurer que l'ordre est respecté scrupuleusement. Donc, laissez-moi utiliser la console de mon Chrome pour vous montrer des choses. Cette mini-carte ici, dans le coin, est positionnée absolument, 'bottom: 0', 'left: 0' et 'z-index: 1'. Donc, ça doit être placé au-dessus de quelque chose avec un z-index de 0. Ce menu qui s'affiche, et qui a toutes ces options ici, il a une 'position: fixed' et un z-index de 10. Donc, il s'affiche au-dessus de beaucoup de choses. Le bouton de zoom a un z-index de 2, donc ça veut dire qu'il se retrouve en-dessous du menu. Bougeons juste ça ici et voyons ce qui arrive. Vous voyez, le menu qui s'affiche, il s'affiche au-dessus du zoom, car il a un z-index de 4 et le zoom a un z-index de 2. Comme vous pouvez voir, Google Maps utilise plein de positionnements CSS et les z-index dans le but de disposer toute la carte et les contrôles au-dessus. Il utilise beaucoup d'autre CSS et du JavaScript aussi bien, mais c'est plutôt sympa que vous puissiez commencer à comprendre comment les autres sites Web sont construits et qu'ils ne ressemblent en rien à ceux qu'on a affiché pour le moment. C'est la puissance du CSS.