Positioning refers to the placement of HTML elements in a Web document.

By default, elements flow one after another in the order they appear in the HTML source, with each element having a size and position that depends on the type and the contents of the element.

While fairly adequate for general usage, this built-in flow model practically limited an author's control over the HTML layout.

The CSS-2 specification, though, includes attributes for controlling the horizontal and vertical placement of elements along the x- and y-axes, as well as attributes for managing the visibility of positioned elements, and the overlap of elements along the z-axis.

There are two ways to position an element in x- and y-coordinates. The type of positioning to use depends on the purpose and the layout of the content.

• Absolute positioning precisely places the element relative to the parent coordinate system, regardless of any other content.
• Relative positioning places the element with respect to other elements on the page. Relative positioning depends on the default flow of the document, and reflows content should the user resize the browser.

Just like any other HTML or CSS attribute, the CSS attributes used to control an element's position are accessible via the document object, thus can be changed dynamically with script. This gives authors a higher level of control in that the position of these elements can be recalculated and redrawn even after the document is loaded, bypassing the need to refetch the page from the server.

Dynamically positioning objects on a page is not as complex as it may seem, since moving HTML elements basically just entails assigning a new location for the element.

By repeatedly calling a function that moves the location of the object in small increments, simple animated movements can easily be done. The key is in learning how to apply basic positioning concepts, mostly about how to determine and change an element's top and left positions.

 Show me 

Note that controlling the position of an element uses several other layout control techniques. These include controlling the visibility of the object — that is, whether or not the element is initially visible on the page, and how much of the element can be viewed by the user.

Dynamically positioning objects in a diagonal or staircase pattern is mostly similar to the concepts illustrated above. The only difference is in the method that moves the object; the move has to increment in both x and y directions.

 Show me 

Scripting the animation is fairly straightforward. By setting an interval that invokes a function using the setInterval method on the window object, we can move any element to the given top and left coordinates each time the interval elapses.