CSS in the wild: Google Maps
About this video
Google Maps is built with HTML, CSS and JavaScript, and uses CSS position and z-index to stack the map and its controls on top of each other in the right order. Using the Chrome console, the narrator shows elements like the mini map, Hovercard and zoom button, and how a higher z-index puts an element on top.
You'll be able to
- explain what z-index does when elements overlap.
- predict which of two positioned elements will appear on top from their z-index values.
- describe how a real website like Google Maps uses CSS positioning.
Key words
- z-index
- A CSS property that decides which overlapping element is on top; higher numbers appear above lower ones.
- position absolute
- A CSS setting that places an element at exact offsets, like bottom zero and left zero.
- position fixed
- A CSS setting that fixes an element in place on the screen.
- Chrome console
- Developer tools in the Chrome browser that let you inspect a page's code and styles.
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.
Video © Khan Academy, used under CC BY-NC-SA. Watch on Khan Academy. Puzzicle is not affiliated with Khan Academy.