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 - CSS Tutorial
From the course: CSS: Float-Based Page Layouts (2012)
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
(Locked)
Relative positioning7m 59s
-
(Locked)
Absolute positioning8m 59s
-
(Locked)
Fixed positioning4m 23s
-
(Locked)
Controlling stacking order8m 31s
-
(Locked)
Clipping content8m 21s
-
(Locked)
Controlling content overflow5m 38s
-
(Locked)
Positioning elements: Lab3m 59s
-
(Locked)
Positioning elements: Solution3m 52s
-
(Locked)
-
-
-
-
-