Main content
Course: Computer programming - JavaScript and the web > Unit 2
Lesson 6: CSS layout- CSS grouping elements
- Challenge: Group the groupers
- CSS width, height, and overflow
- Challenge: The overflowing ocean
- CSS box model
- Challenge: The boxer model
- CSS position
- Challenge: Position planet
- CSS in the wild: Google Maps
- CSS floating elements
- Challenge: Floating clouds
- Using CSS layout properties
- Planning your webpage
- Project: Event invite
© 2024 Khan AcademyTerms of usePrivacy PolicyCookie Notice
CSS in the wild: Google Maps
Let's explore CSS position and z-index properties in Google Maps using our browser's developer tools to inspect the site's CSS. These properties are used to layer and position elements on the page, like the mini map, hovercard, and zoom button. See how the CSS concepts we're learning are applied to complex, interactive websites we use every day!
Want to join the conversation?
How do you get to see the program used for websites or in this case Google Maps? That's really cool!(8 votes)
Right click, then select inspect.
Or, on a chrome book, tap the cursor pad with two fingers, then select inspect.
Have fun!(19 votes)
this is all way too much to memorize, how do people do it?(5 votes)
Usually you memorize the parts you use often. Then you make templates with the most common things you use. Then you have some reference library that you search, and finally Google.(14 votes)
Is it possible to have a negative z-index?(6 votes)
Good question. Yes, you can, but it would get confusing so it's best to use whole numbers.(10 votes)
Why I can't load the progress? I've watched this video several times and it's still with light green icon. This is the last Intro to HTML/CSS lesson and I want to finish the course. Now the progress is 98% because of this. How can I fix this?(4 votes)- have you forwarded any part of it? if you did, that might be the issue.(9 votes)
What would happen if you wanted to put something underneath everything else, but you already had a bunch of elements ordered with z-index? Would you have to reorder them individually or could you make the z-index 0, or -1, or something like that?(3 votes)
How do people remember this stuff?(3 votes)
As someone who's been writing code for years and is now going to college for it, you don't remember it. Google and the Documentation tab below the editor are your friends.(3 votes)
- Is the person in the top right corner Pamela?(3 votes)
Yes I think she is(2 votes)
Do you need to use z-index numbers in order, or can you assign an arbitrarily large number (e.g. 25 or 99) to make sure that a specific element is always displayed on top of everything else? Can you "skip" numbers?(2 votes)- Yes, you can set the z-index to whatever you want. You can always skip numbers.(3 votes)
What sort of code can use your IP address and then convert it into your location? Can you code it with Java?(2 votes)
There is no information in an ip address, by itself, that gives a geographic location.
An IP address is assigned to your device, by your Internet Service Provider (ISP) when you connect to the internet. This ip address is usually dynamic and can change from session to session. It is transient. All it is used for is to provide an 'online' address to send and recieve data from for your current internet session.
There are static ip addresses that are usually assigned to businesses that have a registered 'physical' address. There are tools that can give you useful information about these ip addresses. I am not sure if the tool providers look up information on a public database or maintain their own, but you can often get an address for the business that registered the IP address if not the location of the computer using the IP address.
Using this can allow you to get some information about the ISP that is hosting the IP address. If you were tracking down someone who committed a crime, and you had the IP address and time that the criminal activity happened, it could be used by law enforcement to ask the ISP for more specific information about the device that was using that IP. Information they can provide may include the physical address of the internet access point that the device used.
I don't think JAVA can do that...legally.(3 votes)
How do you make a search bar?(2 votes)
as far as i know you can start using html button, with a "imput" section. it doesn't have a short explication so i recomend search on internet ( i would use CHAP-GPT(2 votes)
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.