Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Absolute positioning

From: CSS: Page Layouts

Video: Absolute positioning

As we mentioned in our last movie, absolute positioning is one of the three positioning schemes in CSS. When you use it to position an element, that element is removed from normal flow and no longer affects the elements around it. Nor in turn is it affected by any changes to those elements. To illustrate how this works, let's experiment with absolute positioning using the absolute.htm file, which you can find in the 04_02 directory. Just a brief look at this page shows us that it really is sort of exactly the same page we were working on, but there is one minor change.

Absolute positioning

As we mentioned in our last movie, absolute positioning is one of the three positioning schemes in CSS. When you use it to position an element, that element is removed from normal flow and no longer affects the elements around it. Nor in turn is it affected by any changes to those elements. To illustrate how this works, let's experiment with absolute positioning using the absolute.htm file, which you can find in the 04_02 directory. Just a brief look at this page shows us that it really is sort of exactly the same page we were working on, but there is one minor change.

Down here where we have our three div tags, we have a section now wrapping those div tags, and notice that the section has a class of container. And we will see the importance of that in just a moment. So I am going to scroll up to our styles. And before we do anything, let's just sort of preview the page, so that we can see what it looks like before we begin positioning our elements. So again, One, Two, and Three, just stacking right on top of each other the same way they did in the last exercise. Okay.

If I go to element1, and this time I set position to absolute and save the file, if I go back in my browser and refresh it, you can see something odd just happens. Now, One is in the same exact spot, but Two looks like it's gone, and Three has moved up. Okay. So you probably figured out from going through the float lesson what's happened here. One has been removed from normal flow, so Two and Three, they don't think it's there anymore and they just move up to occupy that empty space.

So what's really happening is we can't see element2 because it's exact same size as element1. In reality, it's just up underneath it; we just can't see it. So let's add some offsets and see what happens when we do that. So I'm going to go back into our code, go back to element1, and I am going to give it a top offset of 125 pixels and then a left offset of 125 pixels. All right! So I am going to go ahead and save that, go back into my browser, and refresh it.

Now, I've got to ask you, is that where you were expecting to see the element offset? We offset it by a left value of 125 and we offset it by a top value of 125. Now, I assure you that the offsets work exactly the same with absolute positioning as they would with relative positioning. So it moved from the left edge, it moved to the right, if you will, by 125 pixels, and it moved down 125 pixels. What's really different here, however, is the origin point that is used to move the element.

Now, if you were assuming that this was going to be the origin point from its normal document flow, that's not quite how absolute positioning works. The way absolute positioning works is it looks for the nearest containing element to have positioning, and it's just going to keep going up and up and up and up, until finally it just goes to the initial containing block, which in this case will be the HTML tag, and it says, okay, fine, I'll just do that. So in this case, really the viewport is the offset point for this particular element right now. We can change that.

For example, remember, this white box here is the body tag. So if I go back in the code and I go all the way up to our selectors--let's go up to the body selector--I can give it a position attribute as well. So remember, in order for an element to be the offset point for an absolutely position element, it has to itself be positioned. So we're just going to give it relative positioning, and we know from our last exercise that that's not going to affect the body at all. Body still stays in normal document flow. We are not offsetting body, so it's not going to move anywhere.

In fact, the only thing that we've just done to body is we've given it a position value, meaning it has position. So now, our element1, which is right here, is going to keep going up. It's going to say, hey, are you a positioned element? No, I am not. Then it's going to go up to its next containing element. It's going to say, hey, to the body, are you a positioned element? And this time body is going to say, well, yes, I am. So now it's going to use body as its starting point, and if we save this and test it, you can see that it does just that.

It starts at this point, goes 125 pixels over and 125 pixels down. So that means that in order to really gain a fair amount of control over this element, we have to know which containing block we want to be positioned and how it's going to move in relation to that containing block. So if we go up, currently we are using body, but what we want to use is this container. So I am going to go to the container and I am going to choose position: relative. So if you've ever looked through anybody's code, and I know when I was first learning CSS--and I will be honest with you, I still do it now-- I would go to sites that I really admired and I'd say, wow, that's a really neat layout, and I would take a look at their CSS, and I would just sort of go through it and see how they were doing different things and what kind of techniques they were using.

And this is something I used to see a good bit. I would see position: relative, and then I wouldn't see any offsets, and I'd be like, what in the world are they doing with that? And it wasn't until I really learned about absolute positioning that the light bulb when off and I said, oh, oh, okay. So basically anything inside container that's going to be absolutely positioned is now going to move relative to this container. And that's almost like grouping elements and moving them around, so it's a really cool technique. So if I save this and go back up and refresh that, so that's now going to move over and down from the top-left edge of our containing element.

So now that I know what point it's going to be moving relative to, I have a much finer degree of control over this element. So if I come back in, for example, and start changing some things--so like, let's say, for example, that I take my top value and I change that to 25 pixels, and I take the left value and I change that to, say, 150 pixels. So if I save this and preview it, you can see it sort of lines up, one right beside number two. In the last exercise we used relative positioning and we saw that how when you changed one element, because it was still in normal document flow, it affected the other elements.

For absolutely positioned elements, we really don't have that. So, for example, if I come in and told element1 to now be, let's say, 300 pixels wide and 200 pixels tall, if I save this and preview it, you can see that although it changes this, it doesn't affect Two and Three in the slightest. So when you position something as an absolutely positioned element, it totally removes it from normal document flow. You can even think of it as sort of hovering or floating over the page, and the other elements on the page just go about their business as if that element never really existed.

Now, of course this means that we have to be very careful with how we use absolute positioning, to avoid unwanted effects. For example, if I come back in and let's say that I take this left value and I only offset it by 25 pixels instead of 125. So if I save that and test it, you can see that it now covers those up. I mean, you can overlap them as well. If I up that value to, say, 75 pixels, you can see that now it's just sort of overlapping them.

So if we are not careful about how we are positioning these elements within our containers, we have some unintended side effects of overlapping elements, and usually you see that more when an element changes unexpectedly. Like, for example, if element2 had a bunch of text in it and I positioned element1 over here and the initial text only came this far, there would be no overlap. But then if somebody came in and wrote a new blog post, for example, which had a really long string of text in it, we might get some unwanted overlapping, so we need to be very careful about how we structure our layouts when we use absolutely positioned elements.

To be honest, I have seen some designers-- and I know, I told you I hadn't seen anybody create an entire layout with relative positioning--well, I have seen some designers create entire layouts using absolute positioning. While this does allow you to position the elements exactly where you want them, what you're left with when you do this as an entire layout, you're left with elements that don't relate or react to each other in any way. That means that unless the content stays exactly the same, you're probably going to end up with a really rigid layout that consists of all these overlapping elements that you really don't want overlapping.

Now, it's better to think about absolute positioning and approach it as a way to reposition elements within a container when the conditions allow it. Keep in mind that the containing element needs to be positioned as well, usually with a relative value so that the containing element remains within the normal document flow. So next up, we are going to continue to explore absolute positioning as a scheme, by working with the fixed value.

Show transcript

This video is part of

Image for CSS: Page Layouts
CSS: Page Layouts

71 video lessons · 40667 viewers

James Williamson
Author

 
Expand all | Collapse all
  1. 4m 20s
    1. Welcome
      54s
    2. How to use the exercise files
      3m 26s
  2. 1h 39m
    1. Box model review
      8m 47s
    2. Calculating element dimensions
      11m 11s
    3. Understanding margin collapse
      7m 59s
    4. Calculating em values
      7m 41s
    5. Calculating percentage values
      7m 51s
    6. Normal document flow
      13m 3s
    7. Controlling element display
      8m 53s
    8. Using CSS Resets
      7m 11s
    9. Fixed, fluid, and responsive layouts
      9m 9s
    10. CSS debugging tools
      6m 46s
    11. Using the Firebug Inspector and the WebKit Web Inspector
      11m 5s
  3. 53m 15s
    1. Page design workflow
      3m 6s
    2. Page design tools
      4m 56s
    3. Determining page structure
      7m 18s
    4. Creating image assets
      8m 58s
    5. Creating initial page structure
      7m 3s
    6. Adding meaning with classes and IDs
      5m 23s
    7. Structuring content with HTML5
      6m 6s
    8. Building internal structure
      10m 25s
  4. 1h 36m
    1. Floating elements
      7m 50s
    2. Clearing floats
      7m 28s
    3. Containing floats
      7m 50s
    4. Clearfix technique
      10m 38s
    5. Floating inline elements
      14m 34s
    6. Two-column floated layouts
      8m 17s
    7. Three-column floated layouts
      11m 30s
    8. Column height considerations
      7m 3s
    9. Creating equal-height columns
      10m 42s
    10. Floats: Lab
      5m 25s
    11. Floats: Solution
      5m 21s
  5. 51m 42s
    1. Relative positioning
      7m 59s
    2. Absolute positioning
      8m 59s
    3. Fixed positioning
      4m 23s
    4. Controlling stacking order
      8m 31s
    5. Clipping content
      8m 21s
    6. Controlling content overflow
      5m 38s
    7. Positioning elements: Lab
      3m 59s
    8. Positioning elements: Solution
      3m 52s
  6. 48m 46s
    1. Design considerations for fixed layouts
      3m 28s
    2. Establishing the layout grid
      7m 57s
    3. Defining column spacing
      9m 30s
    4. Applying the grid through CSS
      8m 56s
    5. Creating grid-based assets
      8m 26s
    6. Grid design resources
      6m 22s
    7. Building fixed layouts: Lab
      4m 7s
  7. 44m 35s
    1. Designing for flexible layouts
      2m 30s
    2. Calculating percentage values
      8m 45s
    3. Setting flexible width values
      6m 6s
    4. Making images flexible
      8m 10s
    5. Setting minimum and maximum widths
      7m 24s
    6. Building flexible layouts: Lab
      4m 53s
    7. Building flexible layouts: Solution
      6m 47s
  8. 49m 36s
    1. Responsive layout overview
      3m 49s
    2. Using media queries
      7m 16s
    3. Organizing styles
      8m 39s
    4. Making content responsive
      8m 33s
    5. Mobile design considerations
      7m 32s
    6. Building responsive layouts: Lab
      4m 23s
    7. Building responsive layouts: Solution
      9m 24s
  9. 1h 22m
    1. Creating multi-column text
      6m 36s
    2. Using borders to enhance design
      13m 59s
    3. Rounding corners
      6m 56s
    4. Adding drop shadows
      10m 35s
    5. Working with opacity
      6m 8s
    6. Utilizing the background property
      15m 5s
    7. Working with CSS sprites
      7m 58s
    8. Enhancing page design: Lab
      6m 22s
    9. Enhancing page design: Solution
      8m 38s
  10. 6m 25s
    1. Additional resources
      6m 25s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS: Page Layouts.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.