Learning JavaScript

Position and Movement

Before CSS, if you wanted to control the layout of the page with any consistency, you had to use an HTML table. As for any form of animation, you either had to use something such as an animated GIF or a plug-in such as Flash.

Netscape and Microsoft together helped bring an end to all of this with the co-introduction of a specification called the CSS-P, or CSS Positioning. Consider the page as a graph, with both x- and y-coordinates. With CSS-P, you can set an element’s position within this coordinate system. Add JavaScript, and you can move elements about the page.

The proposed CSS-P attributes were eventually incorporated into the CSS2 specification. The positioning properties in CSS2 include the following:

position

The position property takes one of five values: relative, absolute, static, inherit, or fixed. static positioning is the default setting for most elements. This means they’re part of the page flow, and other elements in the page impact the element’s position, and it impacts all elements that follow. relative positioning is similar except that the element is offset from its normal position. A position set to absolute takes the element out of the page flow, allowing you to set its position absolutely in the page. This also allows you to layer elements, one on top of another, just by positioning them in the same location. A fixed position is similar to absolute positioning, except the element is positioned relative to some viewport. For most ...