Examples: Positioning Clip.
CIS/SMOG/NIS jim.cerny@unh.edu 12-JAN-1999
Results.
Notes.
This example shows a variety of positioning attributes. A good reference for these is Danny Goodman's "Dynamic HTML" book, Chapter 4. As he notes, the real power of positioning attributes is when used in conjunction with JavaScript, so that they are changed in response to viewer actions with the mouse but for us JavaScript is a separate topic. In any reading on positioning you also need to be aware that Netscape promoted a LAYER approach in Communicator 4.x that was not adopted as part of the CSS standards by the W3C and which we will therefore ignore.
CSS positioning is designed as a powerful replacement for the temptation to extend and use HTML to combine both structure and style rather than to separate them. In other words, to replace such things as the elaborate use of HTML Tables to position elements in a layout, or the the "single-pixel GIF trick" (promoted by David Siegel).
OK. This example works with three copies of an image (a woman's face from Adobe's Retro Americana collection), to exercise these attributes:
- position (absoute and relative).
- clip.
- left offset.
- top offset.
- z-index stacking order.
Use Photoshop or a similar image editing program to get the image measurements in pixels. The coordinate system assumes 0,0 is in the upper left corner, with x-coordinates measured positively to the right and y-coordinates measured positively down.
Image 1.
This is the full 221w x 264h (in pixels) image of the face. Positioning is specified as absolute in terms of the browser window and is offset 150 pixels (right) from the left margin and 100 pixels (down) from the top margin. Normally this image would be at the bottom of the stacking order, since it is first, but the z-index sets it to 2 to place it higher in the order than the next image.Image 2.
This is the full 221w x 264h (in pixels) image clipped to show the eyes, which occupy a rectangle defined in terms of the whole image as 55,84 (upper left corner) to 192,171 (lower right corner). The clip attribute requires a different specification order of this information, however, as:top right bottom left (that is, 84px 192px 171px 55px)
The image is left in its default absolute position without any special offsets and it is given a stacking order z-index of 1. That causes the full image to partially overlap this image.
Image 3.
This is the full 221w x 264h (in pixels) image clipped to show the eyes, but part of the right eye is excluded, so it is a smaller clip rectangle than in Image 2, a rectangle defined in terms of the whole image as 75,84 (upper left corner) to 192,171 (lower right corner). The clip attribute requires a different specification order of this information, however, as:top right bottom left (that is, 84px 192px 171px 75px)
Positioning is specified as relative (with respect to the flow of HTML elements in the window) and is offset 130 pixels (right) and 50 pixels (down) from the start of that relative positioning. No change is made in its stacking order and since it is last, it overlaps on top of the full image (which was given the full higher explicit stacking order of the first two images).
To get the effects you want with CSS positioning will seem tedious until you get used to it, or unless you have an authoring program that automates much of the work. Expect plenty of trial and error, in any case.
Return to CSS seminar home page.