CSS in the wild: Google Maps

- Let me show you an example of CSS position in z-index in the wild; Google Maps. Probably, most of you have used Google Maps or some sort of online mapping service before, to help you find what you're looking for. These things are just really cool. We can browse around, we can zoom in, we can zoom out, and we can look for things. So, since I'm in Barcelona right now, I'll look for Sagrada Familia, which is this beautiful church. This is actually HTML CSS and JavaScript. Let me show you all the z-index that's going on here. So all the different elements that we see, these have all been positioned using CSS to be on top of each other and they're using z-index in a very particular way to make sure that the order is exactly correct. So, let me just use my Chrome console to show you a few things. This mini map here, in the corner, has position absolute, bottom zero, left zero and a z-index of one. So, that should put it above something with a z-index of zero. This Hovercard that shows up, and has all these options here, it has vision fixed, and then a z-index of 10. So, it shows up on top of a lot of things. The zoom button has a z-index of two, so that should mean that it ends up underneath the Hovercard. Let's just move this over here and see what happens. See, the Hovercard that shows up, shows up above that zoom, because it has a z-index of four and the zoom has a z-index of two. As you can see, Google Maps uses a lot of CSS position and z-index in order to lay out all the map and controls on top of it. It does use a lot of other CSS and JavaScript as well, but it's pretty neat that now you can start to understand how other websites are built that look nothing like the ones that we've been showing so far. That's the power of CSS.