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 for to help you find what you're looking for and these things are just really cool we can browse around and we can zoom in and we can zoom out and we can look for things so since I'm in Barcelona right now I'll look for segrada familia which is this beautiful church this is actually HTML CSS and JavaScript but 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 absorbed 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 1 so that should put it above something with a Z and X 0 this hover card 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 2 so that should mean that it ends up underneath the hover card let's just move this over here and see what happens see the hover card that shows up shows up above that zoom because it has a Z index 4 and a zoom as the index of 2 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