CSS Position

positionThe property is used to specify the positioning method of an element.

The five common values are as follows:

Value	Description	Anchor
static	Default value. Elements are arranged according to the normal document flow and are not affected by top/right/bottom/left.	View Example
relative	Offset relative to its own original position, and it does not leave the document flow.	View Example
absolute	Positioned relative to the nearest positioned ancestor element (otherwise relative to the body), and it leaves the document flow.	View Example
fixed	Positioned relative to the browser window; the position does not change when the page is scrolled.	View Example
sticky	Before scrolling to the specified position, it behaves as relative; after that, it behaves as fixed.	View Example

Elements can betop、right、bottomandleftAdjust the position with these properties, but these properties only take effect whenposition(and the value is notstatic) is set.

Static positioning

The default value for HTML elements, i.e., no positioning, follows the normal document flow object.

Statically positioned elements are not affected by top, bottom, left, right.

Example

div.static { position: static; border: 3px solid #2167AD; }

Try it Yourself »

Fixed positioning

The element's position is fixed relative to the browser window.

It will not move even if the window is scrolled:

Example

p.pos_fixed { position:fixed; top:30px; right:5px; }

Try it Yourself »

Note:Fixed positioning requires a !DOCTYPE declaration to be supported in IE7 and IE8.

Fixed positioning makes the element's position irrelevant to the document flow, so it does not occupy space.

Fixed positioned elements overlap with other elements.

Relative positioning

The positioning of a relatively positioned element is relative to its normal position.

Example

h2.pos_left { position:relative; left:-20px; } h2.pos_right { position:relative; left:20px; }

Try it Yourself »

Moving a relatively positioned element does not change the space it originally occupied.

Example

h2.pos_top { position:relative; top:-50px; }

Try it Yourself »

Relatively positioned elements are often used as containing blocks for absolutely positioned elements.

Absolute positioning

The position of an absolutely positioned element is relative to its nearest positioned parent element. If the element has no positioned parent, then its position is relative to <html>:

Example

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

Try it Yourself »

Absolute positioning makes the element's position irrelevant to the document flow, so it does not occupy space.

Absolutely positioned elements overlap with other elements.

Sticky positioning

The English literal meaning of sticky is "stick" or "adhere", so it can be called sticky positioning.

position: sticky;Position based on the user's scroll position.

Sticky positioned elements depend on the user's scroll, and whenposition:relativeandposition:fixedSwitch between positions.

It behaves just likeposition:relative;And when the page scrolls beyond the target area, its behavior is likeposition:fixed;, it will be fixed at the target position.

The element's positioning behaves as relative before crossing a specific threshold, and as fixed after that.

This specific threshold refers to one of top, right, bottom, or left. In other words, sticky positioning takes effect only when one of the four thresholds top, right, bottom, or left is specified. Otherwise, its behavior is the same as relative positioning.

Note:Internet Explorer, Edge 15 and earlier IE versions do not support sticky positioning. Safari requires the -webkit- prefix (see the example below).

Example

div.sticky { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; background-color: green; border: 2px solid #4C7EAF; }

Try it Yourself »

Overlapping Elements

The positioning of elements is irrelevant to the document flow, so they can cover other elements on the page.

The z-index property specifies the stacking order of an element (which element should be in front, or behind).

An element can have a positive or negative stacking order:

Example

img { position:absolute; left:0px; top:0px; z-index:-1; }

Try it Yourself »

Elements with a higher stacking order are always in front of elements with a lower stacking order.

Note:If two positioned elements overlap and no z-index is specified, the element positioned last in the HTML code will be displayed in front.

More Examples

Clipping the element's shape

This example demonstrates how to set the shape of an element. The element is clipped into this shape and displayed.

How to use scrollbars to display content that overflows inside an element

This example demonstrates how the overflow property creates a scrollbar to accommodate when an element's content is too large for the specified area.

How to set automatic overflow handling in the browser

This example demonstrates how to set the browser to automatically handle overflow.

Change the Cursor

This example demonstrates how to change the cursor.

All CSS positioning properties

The numbers in the "CSS" column indicate which CSS version (CSS1 or CSS2) defined the property.

Property	Description	Value	CSS
bottom	Defines the offset between the bottom margin edge of a positioned element and the bottom edge of its containing block.	auto length % inherit	2
clip	Clip an absolutely positioned element	shape auto inherit	2
cursor	Display the cursor as the specified type.	url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help	2
left	Defines the offset between the left margin edge of a positioned element and the left edge of its containing block.	auto length % inherit	2
overflow	Sets what happens when the content of an element overflows its area.	auto hidden scroll visible inherit	2
overflow-y	Specify how to handle content overflowing the element's content area at the top/bottom edges	auto hidden scroll visible no-display no-content	2
overflow-x	Specifies how to handle content overflowing the element's content area on the right/left edge.	auto hidden scroll visible no-display no-content	2
position	Specifies the positioning type of an element.	absolute fixed relative static inherit	2
right	Defines the offset between the right margin edge of a positioned element and the right edge of its containing block.	auto length % inherit	2
top	Defines the offset between the top margin edge of a positioned element and the top edge of its containing block.	auto length % inherit	2
z-index	Sets the stacking order of an element.	number auto inherit	2

other extensions