Get Moving!

 

A Moveable Feast

The image and red text are relatively-positioned objects. Use the buttons to move the them around. The effect is the same as if you'd declared a relatively-positioned object with initial offsets (using the top and left STYLE attributes). The object will reflow if you resize the browser, but always leaves a 'hole' where it would naturally have been.

Move the picture up and down, and see how it interacts with the headline (get Moving!) and the red text. All three have z-index values of 'auto' (because I haven't specified any other value). The image slides over the headline because it was declared later in the HTML source, and slides under the red text because the red text was declared later. Why the image slides under the pushbuttons is anyone's guess! The image is a transparent GIF, and IE 4 maintains its transparent areas when it's sliding over other objects.