CSS Layout - position Property

position The attribute specifies the type of positioning method applied to the element (static, relative, fixed, absolute, or sticky).

position property

position This attribute specifies the type of positioning method applied to the element.

There are five different positioning values:

  • static
  • relative
  • fixed
  • absolute
  • sticky

elements are actually positioned using the top, bottom, left, and right properties. However, these properties will not take effect unless the position property is set first. Their behavior varies depending on the value of the position property.

position: static;

The default positioning method for HTML elements is static (static).

Static positioning elements are not affected by the top, bottom, left, and right properties.

Elements with position: static; are not positioned in any special way; they are always positioned according to the normal flow of the page:

This <div> element sets position: static;

This is the used CSS:

Example

div.static {
  position: static;
  border: 3px solid #73AD21;
}

Try it yourself

position: relative;

position: relative; elements are positioned relative to their normal position.

Setting the top, right, bottom, and left properties of a relatively positioned element will cause it to deviate from its normal position to adjust. The rest of the content will not be adjusted to accommodate any space left by the element.

This <div> element sets position: relative;

This is the used CSS:

Example

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

Try it yourself

position: fixed;

position: fixed; elements are positioned relative to the viewport, which means that even if the page is scrolled, they always remain in the same position. The top, right, bottom, and left properties are used to position this element.

Fixed positioning elements do not leave gaps in the positions where they should normally be placed on the page.

Please note this fixed element at the bottom right of the page. This is the used CSS:

Example

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}

Try it yourself

This <div> element sets position: fixed;

position: absolute;

position: absolute; elements are positioned relative to the nearest positioned ancestor element (not relative to the viewport, as fixed).

However, if an absolutely positioned element has no ancestors, it will use the document body and move with the page scroll.

Note:The 'positioned' elements are those whose position is defined by static for any other elements.

Here is a simple example:

This <div> element sets position: relative;
This <div> element sets position: absolute;

This is the used CSS:

Example

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
} 
div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

Try it yourself

position: sticky;

position: sticky; elements are positioned based on the user's scroll position.

Sticky elements are positioned based on the scroll position in the relative (relative) and fixed (fixed). It will be relatively positioned at first, until it meets the given offset position in the viewport - then it will be 'pasted' in the appropriate position (such as position:fixed).

Note:Internet Explorer, Edge 15 and earlier versions do not support sticky positioning. Safari requires the -webkit- prefix (see the example below). You must also specify at least top,right,bottom or left one, so that sticky positioning takes effect.

In this example, when the sticky element reaches its scroll position, it will stay at the top of the page (top: 0).

Example

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

Try it yourself

Overlapping elements

When positioning elements, they can overlap other elements.

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

Elements can be set to positive or negative stacking order:

This is a title

Since the z-index of the image is -1, it is behind the text.

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 are not specified z-indexIf the last element in the HTML code is displayed at the top.

Position text within an image

How to place text on an image:

Example

CodeW3C.com Logo
Bottom Left
Top Left
Top Right
Bottom Right
Centered

Try it yourself:

Top Left Top Right Bottom Left Bottom Right Centered

More examples

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

All CSS positioning properties

Property Description
bottom Set the bottom margin edge of the positioning box.
clip Clip the elements with absolute positioning.
left Set the left margin edge of the positioning box.
position Specify the positioning type of the element.
right Set the right margin edge of the positioning box.
top Set the top margin edge of the positioning box.
z-index Set the stacking order of elements.

Further Reading

课外书：CSS positioning overview

课外书：CSS relative positioning

课外书：CSS absolute positioning