What is positioning?

  • Article

Cascading style sheets positioning defines the placement of elements on a web page.

Default positioning

By default, elements flow after each another in the same order in which they appear in the HTML source, with each element having a size and position that depends on the type of element, the contents of the element, and the display context for the element as it will render on the page. This default flow model for HTML layout doesn't give you much control over the placement of elements on the page. By applying a small set of cascading style sheet attributes to the elements that are defined for the page, cascading style sheets can control the precise position of elements by giving exact coordinates. You can also specify placement relative to the positions of other objects on the page.

Just like other HTML or cascading style sheet properties, the cascading style sheet attributes used to control the position of an element are available for scripting, which can dynamically change the position of these elements on the page. As a result, the position of these elements can be recalculated and redrawn after the document is loaded, without reloading the page from the server.

You can use a variety of layout techniques to control the position of an element. When you use specific parameters, you are in complete control over how much of an element is displayed on a page.

Positioning an element

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

  • Absolute positioning   The element is precisely placed relative to the coordinate system of the parent, regardless of any other content.

  • Fixed positioning   The element is precisely placed relative to the browser window, outside the flow of other content.

  • Relative positioning   The element is placed relative to other elements on the page. Relative positioning depends on the default flow of the document, and reflows content when the user resizes the browser window.

Note

If you are using Internet Explorer 6 or a later version, we recommend that your !DOCTYPE be set to strict mode to enable rendering compliance with the W3C specification for Cascading Style Sheets (CSS), Level 2, revision 1 (CSS2.1) Ee371282.xtlink_newWindow(en-us,Expression.40).png, as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">

See also

Concepts

Absolute positioning
Fixed positioning
Relative positioning

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.