The web site of jiawp

CSS Positioning

CSS Positioning Fixed Positioning In this lesson, we'll learn about fixed positioning. Before we start talking about positioning, I want to take a quick look at the text editor we'll be using for this course. I'm going to be using Brackets text editor, which you can see here on the left, and even download it from brackets.io. It's a fantastic text editor, and it's open source, and completely free. Now, if you have a Creative Cloud subscription, you can also grab Edge Code Creative Cloud, which is the same software, it's just branded in a slightly different way to come with Creative Cloud, and that's free as well. So I'm going to minimize these here, and bring up Brackets, which is what I'll be using, and from there, you just want to make sure you come over here, and open your folder, and navigate to our O2 begin project. From there, we're just going to double click our files. We have index.html, and main.css to bring them up here, and the top two are working files. So, I'm going to shrink our window here, and bring up this live preview feature, which you could click on the lightning icon to see, and it's going to load up our files, and we're going to write --- our changes live as they happen, so it'll give us a much better understanding of what's happening to elements as we go along. Now, in our actual files here we just have a couple of little pieces of content. We have a div here with two classes applied, and if you aren't familiar with divs, they're just generic containers that basically allow us to use an element that's purely used as an anchor to apply some styling. So we have our div here with a class of box, and blueBox, and then we have a second div here below, with a class of box, and greenBox. Now, in our CSS, we have just a couple of things we've done with these classes. Our Box class is giving them a set width, and height of 100 pixels and 100 pixels, which makes it a square, and then just a really small margin bottom to add a little bit of space between these two elements. For our blueBox class, it's just making our box blue, and then for our greenBox class, it's just making it green. So, now that we kind of have an understanding of what our code is doing here, we can start to come in here and apply positioning, and positioning allows you to move an element around from its normal position in a document. So, when you're building complex layouts, this is really the cornerstone of being able to not only build complex layouts, but understand the effect it's having on the element itself, and also the other elements on the page around it. So, I'm going to start by applying some positioning to our blue box here, and we're going to start by talking about fixed positioning. So, to apply positioning, we just need to use the position property. So we can just type that in, it's just position, and you can see we have multiple options here, and we want the second, fixed. And, if you are watching here on the right, I'm just going to Ctrl+X to cut this again so we can see it. If you look, we have their normal behavior here, and as I'm applying fixed positioning to the blue box, it looks like the green box after it has just disappeared completely, but, in fact this isn't actually what's happening there. So, to take a look at what's actually happening, we have four different things we can do with the positioning after applying a set type of positioning, and that's allowing us to move an element around from four different directions. We can move it from the top, the bottom, the left, and the right. So, let's start by moving it from the top. So I'm going to come in here and apply that top, and let's try to move it here, about 150 pixels. So I'm going to apply 150 pixels, and if you look now, our blue box has moved exactly 150 pixels from its original position starting right here where the top of our green box is. And the other elements are ignoring this box, so when we applied that fixed positioning, you can see it's a width and height that is being maintained in the document, and the other elements are our page are responding to that width and height. They're allowing it to sit there, but when we apply that positioning, you can see that they're ignoring that width and height, which is why our green box is moving up to take its place. So, when we first applied it, it wasn't that our green box had disappeared, it's just that our blue box is sitting on top of our green box, and we can't see it, but when we add that top positioning there, you can see that it's just moving down the page, and our green box is in fact there. Now, if we wanted to move it from the bottom, let's see what this does. So we can just use the bottom property, and we can move it up 150 pixels from the bottom, but what's happening here is you can't have two conflicting values on each axis, so if you think of it like a graph, we can only have one value for the top to bottom, or one value horizontally left to right. So we can apply one from each direction. So if we wanted to apply a left value, or a right value, that would work, but we can't have two values on that conflicting axis, or in that conflicting direction here. So, if we wanted to change the bottom to left, then we'll see a change, and you can see it's moved left from its position here on the left exactly 150 pixels. And you can see it's allowed to overlap other elements because they were just behaving as it isn't there, at all. Now, another key thing to understand about fixed positioning is where it stays relative to the browser window. So, to see what I mean by this, I'm going to apply a height to our body here so we get a scroll bar that moves our page. So, I'm going to take our body, which you can see is just taking up the amount of height and width it needs, and change that height to be about 2000 pixels, which is going to force it to take up exactly 2000 pixels, and since it's no longer high, or short enough to fit inside of our window, we get this scroll bar. And, as I'm moving our scroll bar now, you can see what fixed positioning actually does, and it's fixing it in place relative to the browser window, so no matter how we scroll our page, it's always going to be exactly in the same spot. So, if you've ever seen a menu bar, or navigation menu that's fixed in place, and it doesn't move from its position no matter where you scroll the window, you especially see this on sites with really long content, so you still have access to your links in your navigation, that's another example of fixed positioning. So, now that we've taken a quick look at fixed positioning, in our next lesson we're going to take a look at another type of positioning, absolute positioning.

Absolute Positioning In this lesson, we'll take a look at another type of positioning, absolute positioning. For this lesson, we'll be working out of the O3 begin folder, so if you're still working out of the O2 begin folder, you want to make sure that you switch to our folder for this lesson. Although it looks very similar, we have a couple differences here, and the main difference is that our blue box is now inside of another div with a class of container. So you can see our blue box here is sitting inside of that div container. Now, I'm going to apply a different kind of positioning to our blue box, just like we did with our fixed positioning in our last lesson, and see how it differs from fixed positioning. So, to our blue box here, right under that background, I want to use the position property again, but this time I want to set it to that first option, absolute. So, I'm going to press Enter here, and if you're watching here in a browser window, I'll go ahead and Ctrl+X to cut this so we can see this again, you can see without any positioning applied that the element is given a width and height, and the other elements are responding to that, they're allowing it to take up that space here in our document. But when I Ctrl+V and apply that positioning, you can see that there are other elements on the page are moving up. Even though we can't see our green box, it's underneath it, and you can see that this is very similar to fixed positioning, maybe even seems like it's behaving exactly the same as fixed positioning, but there's a very important difference here. So if we come to our blue box, and we apply some of those values again, this time I'm going to try moving it from the bottom here, I'm going to move it from the bottom about 50 pixels. You can see it's just taking it, and from the bottom of the window it's pushing it up 50 pixels. So, this is very similar to using the top value, except for it's just calculated from the bottom of the window here. But unlike with fixed positioning, if we actually come over here, and scroll down the page, you can see that it's going to sit there exactly in the spot you positioned it inside of the document. It's not going to scroll with the browser window like fixed positioning does. So, for example, just to show you the difference, if I change this absolute to fixed, you can see it looks identical in every way, except for as I scroll the window here, it's exactly staying in place. So, very similar, but the behavior essentially is also very different as well. So I'm going to apply that absolute positioning back, and I want to apply positioning to its container, and we're going to see an interesting behavior here. So, that container, that div with the classic container that I wrapped around that blue box, I'm going to apply a background color here. So I just deleted that comment syntax, and you can't see the background color because the generic, or the default behavior of a div is it will take up the full width of the browser window, but it doesn't have a height by default. So if we come in here and apply a height of 200 pixels, then you can see that we have that container now showing up. So, I'm going to give it a height of 200 pixels, and a width of 200 pixels as well. And I'm also going to come here and delete that top value here for our box. So it's sitting there in the top left of the window, just where it would render by default even if I didn't have that absolute position applied. So, when I apply this absolute positioning here to our blue box, I want to take a look at a couple different ways that our container and our box are responding. So, I'm going to come in here, and I'm going to apply a margin top to our container, and what this is going to do is just, it's default behavior, it's going to push away our box 150 pixels from the top of the window, and our blue box is going to move with it, because it's inside of that container. So if I apply that 150 pixels, you can see that's exactly what's happening, is it's moving with its container, and the other elements are responding to that movement, because even though the blue box's position is set to absolute, the other elements on the page are still responding to the changes that are made on our container here. But, one interesting thing here that happens is if we start to apply positioning to our container here. So, we have that position set to absolute, and if we set the top to 0 on our blue box, you can see that it's moving to the top left of the browser window. So, now I want to apply that positioning to our container here and see the difference. So I'm setting the position of our .container to absolute, and you can see that the other elements are now ignoring it's width and height too. So, just like it did with the blue box, now that the container has that absolute positioning, they're ignoring its width and height as well. It's being taken out of document flow, just like our blue box, and it just moved down 150 pixels because I've applied that margin there, which is behaving pretty similarly to just using that top value there. But now a really interesting behavior is that when I apply that top 0 to our blue box, you can see that it's not moving at all. So, if you compare that to our absolute positioning there, if you take off that absolute positioning, you can see it'll move relative to the top of the browser window, just relative, exactly to that top. If I moved it left, it would start in the top left, and move 150 pixels left. If we compare that behavior once again to having the absolutely positioned applied to the container, as we're coming in here, and moving the blue box now, it's going to be relative to the top left of the container now, and not the browser window. So if I move it left here, you can see this is moving it left 50 pixels from the edge of the parent, and if I move it 50 pixels from the top, it's going to put it right in the middle of that element, almost exactly in the middle from its parent element, that container class. Now, when I move the container, I move it from the top 100 pixels, you can see that the blue box is going to stay exactly in its position with the container. If we move it from the right 50 pixels, it's always going to be from the edge of this container. Now, if we take off that positioning once again, you can see that it looks like it's acting very similarly, but we can move it 250 pixels, and it's always going to be calculated starting with that top left corner. Now, this might be a little bit confusing, but the main thing to note here is that the absolutely positioning when it's applied to the blue box, it's going to move relative to the body, which starts right here. If I highlight the body we can actually see that. It's going to move relative to that little point right there, but when we apply that positioning to the container, it's responding to the position of the container, and it's positioning it according to that instead of the window. So, that's just a little bit different there. It can be kind of confusing at first, but when you apply positioning to multiple elements like that with absolute positioning, it's important to understand when you're moving it what it's moving relative to, because it can do some kind of funny things there if you don't understand how that can really affect it, and how that can really change. So, now that we understand absolute positioning a bit better, in our next lesson we're going to talk about another type of positioning, relative positioning.

Relative Positioning In this lesson, we'll take a look at relative positioning, and how it differs from absolute, and fixed positioning. For this lesson, we're working out of the O4 begin folder, which looks very, very similar to our project from our last lesson, the main difference here, or the only difference in fact is that I just have a little explanation paragraph in this one about relative positioning, rather than absolute positioning. So, just like we did with our last couple lessons, we're going to apply this positioning to our blue box, and see how the effect differs from other type of positionings, and how the other elements respond. So, right in our blueBbox class, I want to set the position property to another value here, relative. So, keep an eye here on the browser window on the right, and see how this is different from absolute and fixed positioning. So I'm going to come in here and apply that relative positioning, and if you are watching here in the window, it looks as if nothing has happened at all, nothing's moved, nothing has changed. Now, compare this to absolute positioning. If I apply that, you can see that the other elements are then ignoring its width and height, so we can see already that with relative positioning that the element's original width and height is maintained. It's not being taken out of document flow. Now, as we're moving this element, let's take a look at how this behavior changes. So, if I move it from the top 50 pixels, we can see that just like with absolute positioning, the other elements are ignoring it as we're making these changes. So, the biggest difference here is that that original space is being maintained. Now, another big difference here is that the position of it is calculated relative to its original position. So, I think to understand this a little bit better, we can take a look and compare this to absolute positioning. So, I'm going to come up here and delete that top, and I'm going to apply a bottom value of 0 pixels. Now, it looks as if nothing has changed, but this is in fact working. Now, the difference here is we're telling it to move 0 pixels from its original position, the bottom, so we're saying move it 0 pixels from this little area right here, the bottom of the element. So if you move it 10 pixels from that, we should see it move up 10 pixels. So as I change this to 10, you can see that that's in fact the case. We're just moving it 30 pixels. Now I change that to 30 from 10, 30 pixels now from its original position. Now, if we compare that once again to absolute positioning, I'm going to change this from relative to absolute, now those other elements are ignoring its width and height, and if I set the bottom to 0, it's moving it 0 pixels from the bottom of the window, not from the bottom of its original position. So, hopefully that can help kind of illustrate the difference here in showing how it really is its original position. It can be kind of confusing when we come in here and apply a value to this bottom, and we see it not making any changes, like any big changes like absolute positioning does, but if we understand how it's behaving, we can see that it's working, it's not just not having any change on where it's positioned. Now, another question you might have is how this responds when its parent container has a set positioning, because if you remember in our last lesson when we set the positioning of the container to something other than its default positioning, the absolutely positioning element started positioning itself rather to its parent container, rather than to the body. So, let's compare this to relative positioning, and see how this responds differently. So if I bring in the background here, I'm just applying that background to the container div, and I'm going to give it a width and height of 200 pixels just like we did in our last lesson. So I'm going to set that height of 200 pixels, and if I come in here and set the position of this to relative, (Typing) then you can see nothing is changed. It's still going to calculate itself in regard to that original position, now it will move with its parent. So if I move this from the top 200 pixels, for example, oops, I misspelled position there it looks like. So, if I change that to position and not positive I accidentally typed in, then we're going to see that as we apply it, if we move it from the top, then it's going to move with its parent. It's still going to inherit all these changes, and move it relative to its position, but while that might seem a little confusing, it's still behaving exactly the same, it's just going to move relative to where it would originally appear. So if we take away the positioning, you can see that there's no change at all. This is just how it would appear anyway. So, setting the position of the container element does nothing at all. So, once again to compare this to how absolutely positioned elements behave, if I come in here and set the position of our blue box to absolute, if we remember, if we set, say, the bottom to 0, it's going to be right there responding to the body, or the window, and not the container, but once we set the position of the container, it's going to respond to that instead. Even if I set it to relative positioning, it doesn't matter what we set its container, or its parent element to, it's still going to calculate the position differently. So, if I type in position relative this time to the container, you can see that the blue box is now changing. It's still absolutely positioning, but now it's going to be relative to that bottom. So if I move it up 10 pixels, it's going to move 10 pixels from the bottom of the container, versus if this was relative positioning, it's going to move it 10 pixels from the bottom of where it had originally appeared. So, here is its original position, and it's just moving it up 10 pixels relative to the blue box's position, and not to the parent's position. So, hopefully that clarified some of the differences between absolute and relative positioning, and helps you understand relative positioning better as well. So, now that we understand relative positioning a bit better, in our next lesson, I want to take a look at the values static, inherit, and also how to use z-index.

Static, Inherit, and Z-index In this lesson, we'll take a look at static and inherited positioning, and also a look at the z-index property. For this lesson, we're working out of the O5 begin folder, and I'm going to take a look at two last values we can use for the position property. Now, if you're thinking you can't take any more types of positioning to remember, I think you'll be in here for a treat. So, we're going to start like we have been by applying this to our blue box. Now, I want to start by applying a position of static. We can see right down here we have that static positioning, and if you keep your eye over here in the browser, as I apply the static positioning, you can see that like relative positioning, nothing has changed, and it appears as if nothing is changed at all. Now, unlike relative positioning, if we come in here and start to apply some of those position values, say I want to move it from the top 100 pixels, you can see that it's not moving or responding to that at all. Compare this to relative positioning, and you can see that it will respond to these different values, and move as we make those changes. Now, what this means is that static positioning is really just the default behavior of element, so it's saying, behave as you would normally, and it's not going to respond to any changes in the positioning, because it's acting as if it has no positioning at all. So, for example, if we had no positioning here, you can see at that top 150, it's not responding to that at all, so that's kind of an important note there, is that these values are only going to work if it has a position other than static, which is its default behavior. So, we just have one last positioning to try out, and that's inherit. So, to test that out, I'm going to come up here to our blue box and set that position to our third option, inherit. Now, you might be wondering what sticky positioning does, but there's such poor support for it in browsers that it's not even worth it to take a look at what it does. Not only is it confusing, but it's not supported at all, so we can't even use it. So that leaves us with inherited positioning, so if I set inherit for the property, you can see that nothing's happening because it's just inheriting nothing from its parent element, which is this container here. So, I'm going to bring back in this container. We're going to apply that background, and that width and height once again, and if I set this position to relative, then if we come in here and we try to move this around, I can move this let's say left 200 pixels, and you can see it, it's going to be moving left, and this is because it's just inheriting whatever position its parent element has set. So it's inheriting that relative positioning, and, you know this is doing something, even though it might not seem like it if we hadn't moved it all, it looks like, oops, if we move, remove the left value, it looks like the position inherit isn't doing anything, but if we didn't have that position inherit, and we tried to move it left 200 pixels like we just did, it's not going to do anything, because its position is set to static. So, all inherited positioning does is it says, look inside of your container element, or your parent, and if it has a different position, then just inherit whatever it's using. So, really it's not quite that useful because you have to set the positioning to something other than static anyway in order for it to inherit. So, I'm going to come in here and delete that left positioning, and that really just leaves us with studying z-index. So, to take a look at this, I want to come in here and set this position back to relative, and we're going to take a look here. I'm going to move this green box here up a little bit. We're going to set the position of it to relative as well, and then I'm going to move it from its current position, I'm going to move it up about 150 pixels so it overlaps that blue box, which this is just an interesting note, is that we can use negative values here as well. So, what we have going on here, we have our blue box, which is on bottom, or below the green box, and we have our green box on top. Now, if we come in here to our green box, we can set the z-index property, and we're going to see an interesting change. So I'm going to use that z-index, and if I set this to a negative value, let's take a look and see what happens. I'm going to set it to -1, and you can see it's behind the blue box, and if I delete this container, I'm just going to Ctrl+X, you can see our green box is still there, and it's just showing up behind our container element. So, this is actually pretty interesting because the z-index property allows us to control the stacking order of element. So once again, if I Ctrl+X you can see it's appearing on top. If I put the z-index of -1 back, it's going to show beneath the other elements. So, if I delete the z-index property, you can see where it is by default on top of the blue box. Now, if I take the index, the z-index of the blue box, I can move it on top of the green box. So if I set z-index to a higher value, then the default value of the green box, which is by default 1, you can see that now our blue box is showing on top of that green box. If I come up here to the green box, and I set the z-index to 3, you guessed it, it's going to show on top of our blue box. I'm setting this to 3, and you can see that now it's on top. So, as I'm moving these, you can see that we're really just controlling the stacking order of elements. It's going to start with the lowest value, starting in the negatives, and move all the way up to the highest z-index value. So it's really interesting, and some kind of effects we can get here just by stacking these elements. We can maybe look like we have a stack of cards, or something like that. Maybe if we gave this a different background color, we can make it look like a little flat shadow, or something like that. That's a lot of fun we can do, things we can do with that z-index property. So, now we've taken a look at static positioning, inherited positioning, and the z-index property. In our next lesson, we're going to look at a different way to change the position of elements using the float property.

Floating Elements In this lesson, we'll learn about the float property. Now we're working out of the O6 begin folder, and our project's pretty similar this time, except for we only have one, just our blue box here. So, I will take a look at the float property, which is one of the foundational ways to build layouts for a website, and we're going to take a look at why. So, I'm going to come in here to our blue box, and I'm going to apply the float property. So that's just float, and we have multiple values here. You can see brackets, or edge code, and it's going to pull that up for us, and the first option we have is inherit, so it would inherit it from its parent just like with our position with that inherit value, it inherited the position from its parent. None is a default behavior, so that leaves us with two options for the float property, left and right. So, let's start by floating our element left here. So I'm going to float this left, and if you're watching in the browser window here, I'll Ctrl+X so we can see this again, we get some really interesting behavior, so I'm going to float that left, and you're going to see that the other elements are not quite ignoring its width and height, they're just moving up and flowing around the element. So, this is essentially why floats are going to be one of the foundational elements to building layouts on the web. You can get this kind of effect of text flowing around. Imagine if this was an image, or something like that, similar to a print layout, floating allows us to get this very interesting behavior here. So, compare this to absolute positioning. I'll just set that position to absolute, you can see that it would move behind it. It's not actually responding to the width and height still. So once again, if we change that to float left, you can see that they're not going to take up the space that that original element is using. So, essentially here, what floating does is it removes the element from document flow, and then it pushes it to the far left. The main difference here is that other elements are still going to respond to the width and height of that element. So, now that we've taken a look at float left, let's take a look at float right. So I going to change just this left here to float right, and you can see we get the similar, or a similar kind of effect, we have it being pushed to the right, and then our other elements here below coming up to take up that original space. If I increase the size of our window here, you're going to see that it's going to just stay as far right as possible, and the other elements are going to take up as much space around it as possible. So, as I'm shrinking back this window, you can see that the moves, or the words in that paragraph, are just kind of bumping onto a new line as they run into that element. So, we get some really interesting kind of behavior here by using a float. Now compare that to float left, and it's harder to tell there, but it's just going to be pushing it as far left as possible. So you can see that our content here on the right is just going to take up as much space to the right of that element as possible. So, now that we've taken a basic look at floats, in our next lesson I want to take a look at floating multiple elements, and also using the clear property.

Floating Multiple Elements and Using the Clear Property In this lesson, we learn about floating multiple elements, and also how to use the clear property. In our last lesson, we took a look at how other elements responded to one floated element, so I want to take a look, and let's study the behavior of multiple floated elements, and for this lesson, we're working out of O7 begin folder, and now we have our blue box and our green box back. So I'm just going to dive right in, and float our blue box left. So I'm going to start by floating it left, and you can see our green box here right below it is moving up all the way to the top as if it hadn't existed. So, we don't get the text flowing around the box like we did in our last lesson, because we have the green box preventing that from happening here. Now, if we come down here to a green box, and we floated that as well, so I'm going to float our green box left, you can see that it moves up, and now is responding to the blue box, and now our text is flowing around both elements as well. So, this can kind of give you an idea of why floating is really one of the cornerstones of building layouts on the web, especially layouts with multiple columns. If you look here, you can kind of picture if you had these boxes, if these columns with content, if we floated them, we could get them sharing horizontal space, and we could build multiple columns that way as compared to their default behavior, which is just kind of stacking one on top of another, all the way down the page. So, I'm going to add those floats back, and if you didn't want the behavior of the text, if you just wanted to build two columns here, maybe they took up half of the screen each, and you wanted the text to appear underneath them, you can use what's called the clear property. So, to take a look at that, we need to apply the clear property to the element, we want to ignore kind of these floats. So, we want to apply it to the next element that appears in our document. So looking at our index.html, we can see our level 1 heading, or h1 follows immediately after our last floated element, the green box. So if we come in here to our CSS, and we target that h1, if we apply the clear property, that's just clear, we want to clear it the direction our floats are occurring in. So, if our floats are on the left, we want to clear to the left. So I'm going to press left, and you can see it now that the text is just starting on a new line normally. It's not floating up around our boxes here. So, I'm going to go ahead and take that off, and let's take a look at a behavior of multiple elements that are floated right. So I'm going to change our blue box. I'm going to delete the green box float. I'm going to change this to be floated right, and we can see I have our blue box here to the right, and then we have our green box floated to the right as well. So, starting here from right to left, we have our first floated element, then our second floated element. If we had a third box it'd appear here, and stack all the way from right to left. And now you can see that our content here is just flowing up around the left side. Now, if we wanted to clear the content to the left of our floated elements, we can come down here, and we would say clear, I want to clear from anything on the right. So if I apply that right, we can see that now our text is just appearing right below on a new line. Now, one thing I like to do is when I'm clearing elements, I like to use both is the clear value. You can set clear to both, and it's just going to automatically clear it to the left, and the right, and what this does is, especially when you're building more complicated layouts, it just ensures that it's going to clear from either direction, both to the left, and to the right, and you can make sure that you're element is going to start on a new line, and you're not kind of taking any chances with forgetting about something that's floated to the left, or the right, or something like that. So, we have our elements, and we can clear, and start on a new line. So, let's take a look at what happens when we have one floated left, and one floated right. So I'm going to take our blue box and float it left, and as we're stretching the browser window here, we can see we have one on the left, and one on the right, we're going to see that they stretch as far apart as possible. So this one is going to stay far left, and this one's going to stay as far right. So, if you're trying to kind of build a layout here, and have them appear together, it's just important to note there that I think that it's easier, or it makes sense to float them in the same direction. So, if we float both of these left, we can see they sit really nicely together, and we don't have to do anything with their positioning. We don't have to apply margins, or paddings to get them to stay together, like we would if we had one floated left, and floated right. You can see they're just going to be as far apart as possible, so it will save us much more work, rather than trying to push these together using margins, or padding, or something like that. Now, we could get the same effect, or a similar effect by floating both right, except for they both try to push as far right as possible, rather than starting here on the far left. So, that's essentially the basics of CSS positioning, or floating elements, and floating multiple elements. So, in our next lesson we'll start to bring some of these ideas together, and we'll learn some methods for centering elements.

Methods for Centering Elements In this lesson we'll learn different methods for centering elements. One of the most commonly asked questions about CSS positioning is how to center elements. So, in this lesson I want to take a look at a couple different methods we can use to center our elements, and the first thing I want to talk about is centering elements horizontally, or how to get it to appear exactly in the middle horizontally of the page. So, to start we just want to apply this to our blue box, and we can just use a value of float, and float it to the center. Just kidding. There is no float center, and in fact, that's one of the most frustrating things about the float property is we don't have that option, but if we take a look here, as we're going to see in a second, there's really not a much more complicated way to do it. It's almost as easy just applying that float center. So coming into here to our blue box, we can just apply a margin of 0, and auto. Oops, if I can spell auto right, and if you look over here, you can see now our element is perfectly centered horizontally on the page. So, what this is doing here is its saying move left and right in the equal amount, or put an equal amount of margins on the left and right side, and that has the effect of centering it perfectly in the page. The most important thing to remember here is that the values for margin left and right have to be set to auto, though values for the top and bottom could be anything, and will still get the same effect. So, just if this was 100 pixels, we could center it horizontally, and we have 100 pixels of margin on the top and bottom. The other really important thing to remember here is that we need a set width on the element itself. So, our box has a width of 100 pixels, and if we didn't have that set width, I'll just hit Ctrl+X, the element is going to take up the full width of the window. This is its default behavior. It just stretches as far as possible until it has to stop. So, since we don't have a set width here on the body, it's just taking up 100% of our window. As I stretch this, you can see it's just getting wider and wider, and it never changes. So, once we apply that width on there, I'll just hit Ctrl+V to paste that back in, you can see that we have it centered. So, when it has that 100% width, it actually is applying a margin of 0 in auto, but you can't see it, because it's taking up that full width. With our width applied, it does have the effect of centering it, because it's not taking up the full width of the window. We have an equal amount of space on the left and right. So, that's how to center it horizontally, but I want to take a look at centering it vertically as well. The first thing we want to do here, I'm just going to delete that margin of 0 auto, is set its position to be absolute. So we'll set this position to absolute, and once again, that'll just have the effect of removing it out of document flow, meaning the other elements on our page are just ignoring it's width and height, and behaving as if it wasn't there. So, after setting its position to absolute, we want to move it from the top 50%. And if you're looking at this and thinking that that's not exactly vertically centered, you're absolutely right. What's happening here is that the top of the element itself, so right here on this edge, is on that perfect, halfway down, centered imaginary line. So, if you picture an imaginary line here across the horizontal axis on your page, the top of that element is perfectly centered vertically with that imaginary line. So, to center this perfectly vertically, we just want to account for that offset. We want it to be, that horizontal line to come here right in the middle of our element so it looks centered, and we can do that with margins here. So I'm going to use margin top, and we're going to set it to half of our width here, and what that's going to do is it's going to take that line halfway down here to be right here in the middle of our element. So, our width is 100. Half of 100 is 50, so if we set that to -50 pixels, it'll move our element up 50 pixels, and if you were watching here on the right, you can see that that imaginary horizontal line now is exactly halfway through our element, and it has the effect of centering it perfectly vertically on our page. If I move up the window here, if I shrink it, you can see that it's always going to be perfectly vertically centered on the page. So, really, really cool. One of the most difficult types of centering to achieve is to center it both vertically and horizontally, but if we think carefully about what we're doing here, we can see how we can achieve that kind of effect. Now, I want to come in here and I need to Ctrl+X. These properties, we've already done some of the work here by centering it vertically, and I want to apply it to the container instead, and we'll see why in just a second. So I'm going here to our blue box, and apply this style to the container. So now we can see that we have the same visual affect, but now it's our container with this property is applied instead. The little blue box, since it's inside of that, is just kind of going along for the ride. The next thing I want to do is I want to apply a left value of 0, and I also want to set the width of this container to 100%, and this is why we wanted to apply these styles to our container, and not the blue box itself. We want that blue box to look centered both horizontally and vertically, and it's not going to appear like that if it doesn't have that 100 pixel width. We can't have a width on the blue box, and have a width of 100% on that same element as well, so we need two different elements here, so we can get that effect. So, now that we have that width, we can come in here to our blue box, and if you remember how to center an element horizontally, we can just come in here and apply that margin of 0 auto, and as you look here on the right, you can see we have the effect of it being centered horizontally, and vertically as well. So, once again, we applied this to the container because we're centering it perfectly inside of this container, but since this container doesn't have a background, it has the effect of looking perfectly centered on the page no matter when we shrink our window, or if we shrink it vertically, we have the effect of it sitting really nicely there centered on our page. And with that, we've learned the essentials of CSS positioning. So, in this course, we've learned about different ways to change the position of elements, such as absolute, relative in fixed positioning, and also how to float, and clear elements. We finished up by learning different answers to one of the most common CSS questions, how to center elements. I hope you have enjoyed CSS Positioning, and I'll see you next time.