Using the position property in useful ways

Be sure that you read the position property lecture notes, view the linked-in learning video assignments, the Canvas video tutorials and complete CSS Exercise 12 before you begin this exercise.

This exercise contains the following pages

  1. "Sticky Banner"
  2. "Sticky Menu as Footer"

Key points to consider as you complete these exercises:

  • what each of the values for position property do with respect to the "normal flow of the document"
  • what each of the values for position property do with respect to the "context box" (zero point/point of origin) for positioning the element
  • What happens when elements leave the normal flow of the document:
    • lose any default 100% width
    • come to top of stacking order (position property also causes this to happen, even if element does not leave normal flow)
    • is laid out in its location within the normal flow if you do not move it with top/bottom/left/right properties
    • subsequent elements lay out as if that element were not there in the markup

1: Sticky Banner

We'll do this in class, but if you miss it you can recreate the sticky banner demonstrated in the video. Pay close attention to which value for the position property is needed. Understand the "context box" (point of origin/zero point) for relocating the positioned element.

2: Sticky Menu as Footer

We'll do this in class, but if you miss it you can recreate the sticky banner demonstrated in the video. Pay close attention to which value for the position property is needed. Understand the "context box" (point of origin/zero point) for relocating the positioned element.

As always, be sure your pages validate (html and css)