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.
Fixed positioning - CSS Tutorial
From the course: CSS: Float-Based Page Layouts (2012)
Fixed positioning
Fixed positioning is part of the absolute positioning model, and it allows you to position element relative to the viewport. Unlike relative or absolute positioning, fixed positioning wasn't initially supported very well by browsers, which is why it's not quite as well known as absolute or relative positioning. However, the reason increase in support, especially among mobile devices, means that fixed positioning is beginning to see widespread use among designers. Now to demonstrate fixed positioning, I have the fixed.htm file open from the 04_03 directory, and if I scroll down, I can see that we are pretty much using the same file that we've been using for the past couple of exercises. We have our three elements, elements 1, 2, and 3, and they are wrapped in our section, with the class attribute of container. Okay, so I am going to go up to element 1 here, and let's just go ahead and set position for that to fixed. Now since we understand the concept of offsets now, we will go ahead…
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)
-
-
-
-
-