Transcript from the "Debugging Popmotion" Lesson
[00:00:00]
>> Brian Holt: Let's talk about what I did then. Let's go to styles.css. The only thing I did here is on .brand, right? There is z-index 10, right?
>> Brian Holt: And then, that .brand corresponds to the h1 here, right? The h1 of class brand, so not the main nav. That's important, but the brand is the one that gets the z index.
[00:00:32]
>> Brian Holt: And it still goes behind.
>> Brian Holt: I'll try making it a larger number, see what happens.
>> Speaker 2: What browser are you using?
>> Brian Holt: Firefox. I'll try it in Chrome.
>> Speaker 2: Of course, me in Chrome. Of course, I can't navigate the pictures.
>> Brian Holt: [LAUGH] Getting the important things, right?
[00:01:00]
>> Speaker 2: Just lay there.
>> Brian Holt: Look, it does go behind in Chrome. So the moral of the story here is, use Firefox?
>> Speaker 2: [LAUGH]
>> Brian Holt: That's a joke, that's a joke. Cool, well, then let's figure out why that's, now, it's just disappearing, that's fine. And it looks like it doesn't like the cursor either, does it?
[00:01:28]
So I think that, then, it would be WebKit grab, and then, that way, you'll keep the cursor that way, as well.
>> Speaker 2: If it changes.
>> Brian Holt: So this position's relative. If I get a z-index of zero, let's see what happens with that. Z-index one, zero.
>> Brian Holt: And let's try making this, let's see it backs off.
[00:02:11]
>> Brian Holt: There we go, okay. So CSS strikes again. My methodology was CSS's spray and pray, or guess and check, depending on how you wanna think about it. So I think here, if you come to the main nav, and I think if you give this a position of relative, hopefully, no.
[00:02:37]
And then, I think you have to give that a z-index, as well. See, index of, say five.
>> Brian Holt: Yeah, okay.
>> Speaker 2: And you did that on the main nav?
>> Brian Holt: On the main nav. Let's go in and fix it for everyone in our code.
>> Speaker 2: Did you leave the z-index on brand?
[00:03:02]
>> Brian Holt: So the z-index here is 10. So z-index is always a relative number. It's just checking to see if this one's bigger than that one. It's not the z-index 1,000 is any different from z-index 10, it's just a relative thing. So hear in this a position relative on main nav, and I'm gonna say z-index of five.
[00:03:28]
So as front end developers, but you are pretty much by now, all, you all are front end developers. This is a problem you're going to have for the rest of your life [LAUGH] of this works in this browser this way. This works in this browser this other way, and I have to make it look relatively the same in both, right?
[00:03:51]
And it's just kind of the fact of the matter that Firefox is a fundamentally different program than Chrome, than is Edge, than is Internet Explorer 6, is than everything else, right? And you have to make it work across all of these kind of different programs, and it's hard, right?
[00:04:07]
Some of these interact in different ways, and some of these things interpret things different ways, and I don't know who's right here, one of them that feels like it should be defined behavior, and I don't know which one is correct. But in this case, if we do it this way, both of them work the way we want to.
[00:04:26]
Also, if you wanna make grab work in Chrome, you're gonna have to put cursor in here twice, and put -webkit-grab, like that.
>> Brian Holt: Did Jen talk about prefixing? Vendor prefixes? Okay, so I don't wanna get too much into it, cuz it's not really that much an interesting of a subject.
[00:04:47]
But sometimes, browsers will say, I wanna preview this feature before I release it to everyone. So I'm gonna release it prefixed like this. So this is for WebKit based browsers, which Chrome used to be. It's not anymore, but they still use it. WebKit is actually what Safari is based on, if we wanna get technical.
[00:05:07]
And if it's for Firefox, it'll look like this -moz-grab. So now, that we have both of these in there, Browsers that understand -webkit-grab will use this, and browsers that understand grab will just use that. Did it? So,
>> Brian Holt: Mine did not, so that's why I put it in there.
[00:05:39]
>> Brian Holt: Yeah, see here, mine says, I don't know what that is. So then, it looks like this. I think it's text.
>> Brian Holt: In any case, if you put those in it, that's working for everyone now, right?