teaching machines

CS 318 Lab 10 – Absolute and Relative Positioning

February 27, 2017 by . Filed under cs318, lectures, spring 2017.

Dear students,

There’s immense power in the position property. It is your vehicle for anchoring elements relative to another, animating them on user interactions, providing a heads-up display that is always on screen, and achieving a fluid layout that can bend and flex with the browser window. Today we will explore absolute and relative positioning.

Let’s introduce these with a short example from last night’s Oscars. We’d like to make a page that shows a readable blurb of text, but when the viewer mouses over the movie name, an image of the movie’s poster pops up. Here’s our first go:

Best Picture went to Moonlight<img src="http://t3.gstatic.com/images?q=tbn:ANd9GcT53B_Wizqekgv5U9fetXZc_7FmMFzp5MpeEodcyTOiugrjV7iP" width="200">.
Best Supporting Actress went to Viola Davis in Fences<img src="http://t0.gstatic.com/images?q=tbn:ANd9GcRt-j2EYdJQHgR4kf077h3lHPz_h6-JHBIDYv7v-sB1x5lD6rj6" width="200">.

Let’s first get the images out the flow of text. We’ll add them into a class called popup:

Best Picture went to Moonlight<img src="http://t3.gstatic.com/images?q=tbn:ANd9GcT53B_Wizqekgv5U9fetXZc_7FmMFzp5MpeEodcyTOiugrjV7iP" width="200" class="popup">.
Best Supporting Actress went to Viola Davis in Fences<img src="http://t0.gstatic.com/images?q=tbn:ANd9GcRt-j2EYdJQHgR4kf077h3lHPz_h6-JHBIDYv7v-sB1x5lD6rj6" width="200" class="popup">.

Then let’s add absolute positioning to bust them free:

.popup {
  position: absolute;
}

Does this put them where we want them? No. Absolute positioning anchors an element against in closest ancestor that has non-static positioning. For us, that’s body. We want to anchor it against the movie title. We need an element for the title, which we’ll drop into class movie:

Best Picture went to <span class="movie">Moonlight<img src="http://t3.gstatic.com/images?q=tbn:ANd9GcT53B_Wizqekgv5U9fetXZc_7FmMFzp5MpeEodcyTOiugrjV7iP" width="200" class="popup"></span>.
Best Supporting Actress went to Viola Davis in <span class="movie">Fences<img src="http://t0.gstatic.com/images?q=tbn:ANd9GcRt-j2EYdJQHgR4kf077h3lHPz_h6-JHBIDYv7v-sB1x5lD6rj6" width="200" class="popup"></span>.

We also need to give it non-static positioning. We don’t want it to be bust free from its parent element as is done with absolute, so we use the milder relative:

.movie {
  position: relative;
}

Since we don’t set top, right, bottom, or left, the movie span just appears in its usually location.

How do the movie posters look now? They clobber the text. Let’s tweak popup to shove them down below the text:

.popup {
  position: absolute;
  top: 18pt;
  left: 0;
}

Better? Let’s do one more thing. Let’s hide the posters, but in a bit we’ll display them when the viewer hovers over the text. Let’s also make the text look like a link:

.movie {
  position: relative;
  color: blue;
  text-decoration: underline: 
}

.popup {
  position: absolute;
  top: 18pt;
  left: 0;
  visibility: hidden;
}

How do we handle the mouse hovering? We can use the hover pseudoselector:

.movie:hover {
  color: red;
}

Then we can use a descendent selector to toggle the visibility:

.movie:hover .popup {
  visibility: visible;
}

Here’s your TODO list for next time:

See you then!

Sincerely,

Lab

First create a lab10 directory. Add a partners.html and include your first names and last initials.

Bulletin Board

Create a bulletin board that shows three Polaroid photos of animals:

The Polaroid effect is not in the original images, but we’ll use CSS to add it in. Here’s your checklist:

Staff

Create a page that shows a staff listing like this:

Note how when the mouse hovers over a photo, it depresses. We can do that with CSS!

Here’s your checklist: