CSS position Property

<!--

main_leaderboard, all: [728,90][970,90][320,50][468,60]

-->

CSS position Property

❮ Previous
Complete CSS Reference
Next ❯

Example

Position an <h2> element:

h2


position: absolute;


left: 100px;


top: 150px;

Try it Yourself »

More "Try it Yourself" examples below.

Definition and Usage

The position property specifies the type of positioning method used for an
element (static, relative, absolute, fixed, or sticky).

Default value:	static
Inherited:	no
Animatable:	no. Read about animatable
Version:	CSS2
JavaScript syntax:	object.style.position="absolute" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
position	1.0	7.0	1.0	1.0	4.0

Note: The sticky value is not supported in Internet Explorer or Edge 15 and earlier versions.

<!--

mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]

-->

CSS Syntax

Property Values

Value	Description	Play it
static	Default value. Elements render in order, as they appear in the document flow	Play it »
absolute	The element is positioned relative to its first positioned (not static) ancestor element	Play it »
fixed	The element is positioned relative to the browser window	Play it »
relative	The element is positioned relative to its normal position, so "left:20px" adds 20 pixels to the element's LEFT position	Play it »
sticky	The element is positioned based on the user's scroll position A sticky element toggles between `relative` and `fixed`, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). Note: Not supported in IE/Edge 15 or earlier. Supported in Safari from version 6.1 with a -webkit- prefix.	Try it »
initial	Sets this property to its default value. Read about initial	Play it »
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Example

How to position an element relative to its normal position:

h2.pos_left
    position: relative;
    left: -20px;

h2.pos_right
    position: relative;
    left: 20px;

Try it Yourself »

Example

More positioning:

#parent1
    position: static;

border: 1px solid blue;
    width: 300px;

height: 100px;

#child1
    position:
absolute;
    border: 1px solid red;

top: 70px;
    right: 15px;

#parent2

position: relative;
    border: 1px solid blue;

width: 300px;
    height: 100px;

#child2

position: absolute;
    border: 1px solid red;

top: 70px;
    right: 15px;

Try it Yourself »

CSS tutorial: CSS Positioning

HTML DOM reference:
position property

❮ Previous
Complete CSS Reference
Next ❯

搜尋此網誌

wefcdr