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.

You'll be using all 3 of the values for the position property: relative, absolute, fixed. Of course, you don't use them all in the same page, but you'll need them all to complete every page in the exercise.

Also, read the text in the body of the exercises; it has good information about the position property.

This exercise contains the following pages

  1. "Sticky Banner"
  2. "Sticky Menu as Footer"
  3. Applied Position (absolute and relative)

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
    • position is not like float (float leaves normal flow, but has a "wrapping" feature which is not related to the normal flow but rather to float itself) so positioned elements that leave the normal flow will overlap stuff and cover it up

1: Sticky Banner

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

Recreate the sticky menu as footer 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.

3: Menu at Top of Banner and Shortcut Menu

Move the menu and make fancy links as demonstrated in the videos (this page has two videos: one for moving menu and another for the shortcut menu design). You don't need to style the menu other than to move it, but you do need to style the shortcut menu. This involves image replacement. You can see the screen shot for details.

Pay close attention to which value for the position property is needed to move the menu above the site id. Understand the "context box" (point of origin/zero point) for relocating the positioned element.

All the shortcut menu links have hover styles in the text. The text is "hidden" until the hover. Then it shows up again. Change opacity on span to make this happen. Pay close attention to which value for the position property is needed to move the text into the vertical center of the hyperlink. Understand the "context box" (point of origin/zero point) for relocating the positioned element.

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