Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

singke (singke) 2019-07-03 02:42:03 UTC #1

ptg16476052

Absolute Positioning 297

I placed the picture within a relatively positioned

and then added an absolutely
positioned

within it. I chose relative positioning for the outer

because I want
to position elements within it, and yet I still want it to appear within the normal flow so
that it won’t overlap elements that follow it on the page. I then nested both the image
and the

containing the note within that positioned

. The absolutely posi-
tioned

with the note is positioned relative to the positioned

within which it
is nested. That’s what makes it easy to treat it as an overlay for the image, as seen in the
screenshot.

Dynamic Overlays

The previous example was a simple overlay, but there’s more you can do. For example,
it’s fairly common to only show the overlays over images when the user moves his
pointer over the image. You can accomplish this effect using CSS. To hide the overlay in

FIGURE 11.5

A picture with a

note overlaid above

it.

Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

Dynamic Overlays

Get our desktop app

Company

Features

Documentation

Resources