Previously we spoke about one type of alternative element positioning and that's floating elements. I say alternative because it is It is alternative to the normal document flow. This lecture, we're going to speak about a couple more positioning schemes, and that's relative and absolute. These positioning schemes allow you to specify precise offsets to move the target element to the different part of the page origin.
First let's talk about static positioning. Static positioning is basically a different way of saying normal document flow. It is actually a default setting for all elements, except html. And if you try to apply positioning offsets on elements who's position property is set to static, the offsets are just ignored.
A different type of positioning scheme is called relative positioning. When you apply position relative on an element. The element is positioned relative to its position in the normal document flow. In other words, if you were to apply offsets on that element, there will be offset, from the original normal document flow position of that element. So the positioning CSS offset properties are top, bottom, left, and right. So when you position element as relative you're basically creating like an anchor for the offsets. So the elements top, bottom, left, and right edges become the boundaries from which you offset the element. The important thing to know about relative position is that the element that is set to relative positioning is not taken out of normal document flow. In fact even if it's moved by using the offsets, its original spot is preserved. So as far as the rest of the HTML elements and the rest of the HTML page is concerned, that element is still sitting in its original spot even though visually its off somewhere else. So let's give an example. So here's the paragraph. And it's basically represented by this orange box. As soon as we set position: relative on the element, its edges become almost like an anchor for future offsets. Now when we apply the offsets, the element moves relatively to its original position in the normal document flow. So in this case it's moving top 50 pixels and left 50 pixels. Now these values might be a little bit confusing since we're saying left 50 pixels but yet we're moving the element to the right. So the way you could think about these offsets is really not top or left but more like from the top and from left. So if you take from left 50 pixels, you move 50 pixels to the right, and if you take from top 50 pixels, you're really removing 50 pixels from the top. Also note that nothing really changed about the document. And other than this element moving. The original space for that element still remains and the originally laid out elements around that element still remain exactly the same, because they think the element is still sitting in its original spot. You can also use negative values for these offsets and which one you use, bottom right or top left. It's really more of a convenience for you. Depending on the use case you're trying to code to. So in this example we achieved the same result by using negative bottom right values as we did by using positive top and left values.
Now the idea of absolute positioning is that all offsets, top, bottom, left, right, are all relative to the position of the nearest ancestor which has positioning set on it other than static. In other words, some parent, grandparent, on and on and on, ancestor has to have its positioning set other than static, and then the absolute positioning will actually start working. By default, HTML element is the only element that has non-static positioning set on it. And it's actually set to relative. Unlike relative positioning, the element is taken out out of its normal document flow if it's positioning a set to absolute.
Let's say we have this grey box and it's some kind of a container element and it's position is set to relative. Then we have this box number one, that's the one we're going to target and some kind of box number two, some other element that's box number two. So if we set the position absolute on number one, what's going to happen is, it's going to be first of all, taken out of its normal document flow. And it's going to remain in the place where it was without any other offsets. So as you can see in this illustration, element two moved up underneath element one since element one is no longer part of the document flow. Element two doesn't think it's even there.
Now if we do some offsets, and in this case we're doing bottom right offsets, we're going to be relative to our container elements, since that container element's position is set to relative. And we're going to do from bottom 10 pixels, and then from right 10 pixels over. And that's how we end up with this number 1 box being in the bottom right of our container element.
A really cool feature of this combination is, that if your container element, is itself offset, everything inside of that container is offset with it. So you could set our particular layout with a container element. And then move that container element, or offset it all around the screen, without worrying about having to offset particular values, of every element within that container element.
Let's jump into the code editor and take a look at some examples of these concepts.
Okay, so here I am in subline text and I'm looking at a file called positioning before.html and it's located in the examples lecture 22 folder. So let's examine real quick the structure of the HTML. It's super simple. We just have an H1 just announcing what we are, what we're doing here And we have a div, which has an id container, and then four paragraphs, each one having id p1, p2, p3, p4, and that's it. And our initial styles are pretty simple as well. First of all, we reset the margin and padding as well as set our box sizing to border box. We also gave the h1, since we reset the margin, we gave h1, the very first one, a bit of a bottom margin 15 to push down the rest of the contents of the page.
We gave our div container that familiar light bluish color, and every paragraph tag is 50 pixels by 50 pixels, and it has a border black border of one pixel, and also has a margin bottom of 15 pixels, every single one of them. And every single one of them has just a different color just to differentiate which one we're looking at. So let's go ahead and take a look at what this looks like in the browser.
So as you can see here's our four paragraph boxes. They're sitting inside this light bluish container. So the first thing we're going to do is we're going to work on this first box right here. And what we'll do is set it's position to relative. When we do that, save and refresh, we see nothing really happened. Well actually, what's going on here is that we've set an anchor so now all offsets of this element are going to be relative to its normal document flow position which still remains right here. Let's go ahead and give it some offsets to simulate it going basically down to the second row. We'll give it top 65, so it's from the top, 65 pixels down. And then from the left, 65 pixels from the left. And we'll refresh the page. And here we go so we move this element form here to here and as you can see this element is not taken out of document flow, because te rest of the elements are still sitting in their original spots and this space is still completely unoccupied. Well the truth of the matter, the browser is thinking that it's actually occupied by this element that we just moved over here. So, that's the basic run down of irrelative positioning. And next, we're going to go over an example of absolute positioning.
Video Images
0 comments:
Post a Comment