From the course: CSS: Float-Based Page Layouts (2012)

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Absolute positioning

Absolute positioning - CSS Tutorial

From the course: CSS: Float-Based Page Layouts (2012)

Start my 1-month free trial

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…

Contents