Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Absolute positioning, unlike relative positioning, removes the element from normal document flow. Other elements in the document that come after it move up as if the element doesn't exist. The positioned element is then placed precisely where you want it using a combination of left, top, right or bottom offset values. The trick is to know which point you're positioning it from. Absolutely positioned elements are moved in relation to the closest parent element that has a position attribute. If no such element exists, then the top parent element, which is usually the body tag, is used instead.
This is why it's so common to have parent elements that merely have a positioned attribute of relative with no other offset values. Now that sounds pretty abstract until you actually see it in action. So we're going to go ahead and do an exercise here where we do absolute positioning and we understand the relationship that their parent elements have to the positioned element itself. So I have the index.htm file opened here and this is found in the 10_06 folder. Now we're getting a little bit closer to our Explore California layout.
This is for the most part all of the structural elements of our Explore California page. We have our header here in the top left-hand corner. It's encased within a div with an id of wrapper and then below that we have our mainContent, our mainNav, our sidebar and our footer and right now those elements are floated to achieve their layout look but for the header element we need everybody else to move up to occupy the space where the header is now, and then we're going to use the header and overlap our layout with it.
So, absolute positioning is a really good choice for doing that. So what we're going to do is go over to our CSS Styles panel and I might extend this a little bit so we can see a few more of these. I'm looking for this selector right here, the header and if you'd like you could go ahead and double-click that to open up the CSS Rule Definition dialog box. You could certainly add the properties manually in the panel as well. So I'm going to go over to my categories here and click on the Positioning category, and we're going to choose a position of absolute for this.
Now the offset that we're going to give it here are a little different than in some cases. We're going to go ahead and give it a left offset of 35 pixels. Now remember that should move it 35 pixels to the right because you're going to offset the left edge from the left -most edge of its parent element. But for the top value, here's where we're going to do something a little different. That's going to get a value of -25 pixels. Now a negative top value instead of pushing an element down the page will pull an element up the page.
So if you want to overlap something and move something up from another element, using negative offsets is a good way to do that. Now if I go ahead and click OK and do a Save All, we don't really see any change occurring except for the header just seems to disappear. Well Design View is not going to do a great job of showcasing to us what's going on here. So I'm going to switchover to Live View. Now in Live View, we can see that our header has moved over and up a little bit and then all the rest of the content on the page has moved up as well.
Now in order to really illustrate what's happening here, I need to be able to resize this. So what I'm going to do is preview this in my browser. So any browser should work here. I'm going to use Firefox and now we see maybe not quite the desired result that we were thinking. If I grab my browser and resize it, I can see that the remainder of the layout is kind of moving around with that. It's centered within the window so as I resize that layout all the mainContent, the sidebar, all those elements are moving along with it. But the header is staying fixed in that location.
Now the reason for that is exactly what we were talking about earlier. The header is going to go up to its parent element and it's going to ask, do you have a positioning attribute? If that value is no, it's just going to keep going up the document tree until somebody finally says yes. If nobody ever says yes, then it ends at the body tag and it says, "okay, you are my parent element." And so now what we're seeing is this header element offsetting itself 35 pixels from the left edge of the parent containing element and then it's actually going up a little bit. If we can see kind of behind this toolbar right here, the top of our header would be right here because it's going -25 pixels up.
Okay, that's not where we want it. We want it to occupy this space right here. The way to do that is to make sure that it's positioning itself relative to the wrapper div tag and not the body div tag. So how do we do that? Well pretty easy. We go right back to our CSS Styles, we find our #wrapper div tag, and then with our #wrapper div tag we give it a positioning attribute as well. But this time we give it a relative positioning attribute. Now if you remember from the Relative Positioning movie, this is going to keep the wrapper as part of the normal document flow.
Relatively positioned elements are not removed from normal document flow, so it shouldn't have any adverse effect on our layout at all. We're also not going to give it any type of an offset. So we're not going to give it any top values or left values or right values. We're just going to leave it alone. So what that in effect is going to do is everybody else will ignore that relative positioning but the header is going to say okay so you have a positioning attribute and it will now position itself relative to the #wrapper div tag. So I'm going to go ahead and click OK. Save the file and preview that in my browser again.
Now we can see the header is positioning itself just 25 pixels above the #wrapper div tag, which is butting up right up against the top of our browser window, and 35 pixels from the left of the #wrapper div tag itself. Resizing the browser window now means that that object goes right along with it. Now as we mentioned before absolute positioning removes it from normal document flow and everybody else moves up to occupy that space. You can see this with mainContent. mainContent is now moving up to the very top of the #wrapper div tag and butting up against the top right edge.
However, our mainNav and our sidebar aren't moving up underneath the header div tag like we would expect. Why not? Well it's a little bit of trickery there. What we've done is we're placed enough of a top margin on mainNav to push it this far down. So normally it would move up and under the header div tag, but in this case we have given ourselves enough top margin to give us the illusion of the fact that the header is pushing it down but in reality it's not. So absolute positioning is fairly straightforward. The upside to using it is that you can position elements with pixel level precision.
The downside is that the element is removed from normal flow so it no longer interacts with other elements. In fact, it will overlap other elements on the page, making it impossible to have a layout that relies heavily on absolute positioning unless every element will be a fixed width and height and never change. For most layouts absolute positioning is used as it is here, to position elements within their parent containers. It's also worth noting that you can change the stacking order of absolutely positioned elements by using the Z-index property.
The higher the index value, the higher the stacking order. So if you need to make sure an element is on top of other elements, you can simply give it a high Z-index value.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.