Main content
CSS layout
Current time:0:00Total duration:2:13
CSS in the wild: Google Maps
Video transcript
- 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.