CSS Reference Manual

CSS @rules (RULES)

Complete List of CSS Properties

CSS quotes attribute CSS3 perspective-origin attribute

CSS position property usage and examples

The CSS position property specifies how an element is positioned.

The following table provides usage instructions and version history for this property, as well as the syntax for using it in JavaScript scripts.

Default Value:	static
Applies to:	All Elements
Inheritance:	None
Animatable:	No.See also Animation Properties.
Version:	CSS 2,3
JavaScript Syntax:	object.style.position="absolute"

Tip:Elements other than the position of the element static are called positioning. They have a vertical position in the stacking environment determined by the z-The index attribute determines.

Syntax of position usage

The syntax of this attribute is as follows:

position: static | relative | absolute | fixed | sticky | initial | inherit

The following example demonstrates how to use the position attribute.

Example

　　h1　{
　　　position: absolute;
　　　top:　100px;
　　　left:　150px;
　　}

Test to see‹/›

Note: For print media types, the box appears on each page and is fixed relative to the page box, even if the page is viewed through a viewport (for example, in 'print preview' mode).

Attribute value

The following table describes the value of this attribute.

Value	Description
static	The box of the element is a normal box, laid out according to the normal flow. For static boxes,top,right,bottom,left, andz-indexThe attribute will be ignored. This is the default value.
relative	The element is positioned relative to its normal position (which is called the position in the normal flow).
absolute	The element is positioned relative to its first ancestor element that is not static in position.
fixed	The element is fixed relative to the viewport of the screen and does not move when scrolling. When printing, the element will be printed on each page.
sticky	The position of the element is similar to that of a relatively positioned box, and it is 'pasted' to the nearest ancestor that has a 'scrolling mechanism'.
initial	Set this attribute to its default value.
inherit	If specified, the associated elements adopt the attribute value of their parent element's position.

Browser compatibility

The compatibility of the position attribute of the browser; the numbers in the table below indicate the minimum version number of the browser that supports this attribute; all mainstream browsers support this attribute.

	Firefox 1+ Google Chrome1+ Internet Explorer 4+ Apple Safari 1+ Opera 4+