teaching machines

CS 347: Lecture 9 – Position: Absolute

September 22, 2020 by Chris Johnson. Filed under fall-2020, lectures, webdev.

Dear students:

Last time we met relative and fixed positioning. Today we use absolute positioning to anchor an element’s box against an ancestor’s box. Absolute positioning gives us considerable freedom to implement user interfaces, and we examine three case studies that use it to add depth, interactivity, and visual effects to our information.

Here’s your TODO list:

• Watch Absolute Positioning, in which we see how to anchor boxes against boxes higher up in the document.
• Watch Case Study: Bulletin Board, in which we use absolute positioning to make Polaroid photos.
• Watch Case Study: Dropdown Menus, in which we use absolute positioning to achieve dropdown menus.
• Watch Case Study: Collapsible Boxes, in which we use absolute positioning to ellipsize long stretches of text.
• Watch Haiku, in which we take a poetic aside.
• Read chapter 1 of Eloquent JavaScript.
• Be prepared for a peer review on Thursday. Plan on sharing a first draft of your layout, using placeholder text and images as necessary.
• Post any questions and comments you have regarding the videos and readings on the course Slack.

See you next time.

Sincerely,