Positioning - CSS Tutorial

- [Instructor] There are several really important concepts that you'll need to understand when you're working with animation. And one of those is how positioning works. The positioning specifies how an element is going to be placed on the page, and the easiest to understand is the default, which is static. Now static just means that the object will be displayed in the same order as the HTML. The next is fixed positioning. And that means that the element will be displayed relative to the browser window. So it can go at the top or bottom left or right and some value relative to that. Things get interesting with relative, you can position an element relative to where it would normally display by offsetting it in any direction. Now where it gets real confusing is with absolute. Now in this case, the element displays relative to its first position parent. Most of the time this is used with relative positioning so that an absolute element will be positioned with a relatively positioned element. Now there's another one called sticky. And this one is very new and it doesn't always work in all browsers. However, it allows you to make an element stick to the top of the screen as you scroll down. Now to get a hint of how this works, we'll get started by building a navigation for our project. So we're going to start with this bootstrap template right here, you can see that I'm calling the bootstrap CSS, as well as the bundle bootstrap JavaScript right here. And then bootstrap requires jQuery, or at least this version does. I'm using version 4. So we're calling that right here. And all these files are in this JavaScript folder. So you can see there's a lip sub folder there. And in addition to the bootstrap code, you'll see everything else we'll need for this project. So let's go ahead and modify our navigation, which right now is just a series of links. So they get started, I'm going to use a nav tag. And in that nav tag, I'm going to add some classes. The way that I usually curate projects is by putting my personal classes first, and then I use any framework classes. So I'm going to add a site nav class. This is not a bootstrap class, it's just one that I'm going to use for myself. And then I'm going to add some bootstrap classes here. So I'm going to use text uppercase. This will make of course the text uppercase, and it's the same as using CSS to do this, so in addition to that, we're going to need another few navigation classes. So navbar and then navbar expand. So this particular class tell bootstrap when to collapse the navigation. So in addition to navbar expand md, this means that at the medium breakpoint, I want this piece of navigation to expand. Normally, the navigation will all be collapsed, right? I'm going to make this a dark background navbar. So I'm going to need a navbar dark class here. And I'm going to set the width of this navigation to 100%. So this is how you do this and bootstrap. And then I need to set up a background of primary, this is just the background color for the navigation. Then I'm going to grab all this and put it in here. And whenever you create navigation, you can create a section called the branding. And also then create the actual navigation section. So let's go ahead and do that. I'm going to come in here and create a class. This is my branding here. So this is going to be a navbar brand class. And I'm going to set the font weight here to normal. So you can see that one of the things that bootstrap gives is a bunch of classes that are essentially the same thing as their CSS counterpart. Now I'm going to be using the bootstrap classes for most of the layout. And then I'll use my CSS for the animation code, just so that we focus the style sheet that we're using in this project, to do only the animation parts that we're going to need. All right, so this is going to go to a link that will have on the page called page hero. And then in addition to that, I'm going to add an icon. So for that, I'm going to use the Font Awesome classes, which use an i class for an icon and then I'll use the classes to call in a cube icon. So you use the FAAs in this framework, and then use the Q class. And then I'm going to make sure that I have a little bit of breathing room. So in bootstrap, you can do a bunch of padding and margin classes by using these mr, in this case for margin right, and then two units. So that would give us a little bit of breathing room. And then I'm going to close out that link right here. So this is not going to look that great quite yet, but it's actually giving you the icon as well as sort of this version of the link. So let's go ahead and keep on going. Now we're going to additionally classify a section down here as a navbar nav. So we'll do div, and then this will be a class of navbar nav. So this is the actual links for the navigation, we'll grab all these links, and we'll paste them right here. And then we're going to need to add a few classes here. So we'll do a class on all of these. And the classes that we'll need is identifying each one of these as an item as well as a link. So let's go ahead and save that. You can see sort of the links right here. They're all stacked up, and then once we get to a medium breakpoint, because we're using this navbar expand md, they're going to go right next to each other. So that's great. Now I'm going to add margin, left auto class here. This will make the links stay to the right, whenever you expand this navigation, that looks pretty good. Let's go ahead and make this window bigger, so you can see things a little bit clearer. And what I'm also going to do is create another div right here. And I'm going to give it a class of container fluid. The containers and bootstrap is how you align things to the bootstrap grid. So by creating a container fluid, we're aligning that navigation to the grid but making it go all the way to the edge of the screen, with a little bit of room on each side, you can see now that there's a little bit of room here on the side, as well as to the left of this navigation element. That's a pretty nice looking navigation, but we're going to do one more thing and that is to give ourselves a little button that will allow this navigation to collapse when it is a little bit small. So to do that, I'm going to use a button right here, and I'll say this is type of button. This is for screen readers, and then I'll add some classes here. So this is going to be a navbar toggler. This is going to be a button that allows you to see the navigation when the screen is very small. So we'll use a data toggle here to pass it to bootstraps JavaScript of collapse. And this should be an equal sign right here. We'll set the target of this, again these data elements are elements for bootstraps JavaScript, and we'll say that this is going to be myTogglerNav. So this is an element that we are going to have to create. And then we'll specify for against screen readers area controls to be the ID of my toggler nav. That's pretty good, let's go ahead and save this. And then inside this button, I'm going to create a span and this is going to have the icon. So this will say class navbar toggler icon. Now I need to identify the section that I want to toggle with this button, so my entire navigation is going to have an additional section. This is going to have a collapse class and also the navbar collapse. So collapse is of course how things are going to show and hide, and then all this stuff right here is going to go in this section, save that. And then in here, we need to make sure that we give this ID what we called in a toggler. So this myTogglerNav will be the ID, And if we take a look at our navigation, let's see if we make it small. You can see that now you get this nice little button. And when you click on it, it toggles the navigation on and off. So that is how you build a navigation, one of the elements that I haven't added to this navigation is the positioning elements. So here is where if you wanted to, you can add an additional class of sticky top. So the positioning elements would be the different types of classes that you can add. Right now it's not going to make a lot of sense to add those because we don't have any other elements on the page. You can see though, that the navigation is pretty easily built in bootstrap, and some of these elements are using positioning like this toggler, is using a little bit of positioning to show you this animation. So it will keep on going and adding things and also explaining what you're going to need to know in order to build these animations in the future videos.