Positioning in CSS

The CSS properties that allow you to position elements manually in HTML

Share this page

New! My 44-page ebook "CSS in 44 minutes" is out! 😃

Get it now →

#bottom

Defines the position of the element according to its bottom edge.

default bottom: auto;

The element will remain in its natural position.

bottom: 20px;

If the element is in position relative, the element will move upwards by the amount defined by the bottom value.

bottom: 0;

If the element is in position absolute, the element will position itself from the bottom of the first positioned ancestor.

#left

Defines the position of the element according to its left edge.

default left: auto;

The element will remain in its natural position.

left: 80px;

If the element is in position relative, the element will move left by the amount defined by the left value.

left: -20px;

If the element is in position absolute, the element will position itself from the left of the first positioned ancestor.

#position

Defines the position behavior of the element.

default position: static;

The element will remain in the natural flow of the page.

As a result, it will not act as anchor point for the absolutely positioned pink block.

Also, it will not react to the following properties:

  • top
  • bottom
  • left
  • right
  • z-index

position: relative;

The element will remain in the natural flow of the page.

It also makes the element positioned: it will act as an anchor point for the absolutely positioned pink block.

Also, it will react to the following properties:

  • top
  • bottom
  • left
  • right
  • z-index

position: absolute;

The element will not remain in the natural flow of the page. It will position itself according to the closest positioned ancestor.

Because it's positioned, it will act as an anchor point for the absolutely positioned pink block.

Also, it will react to the following properties:

  • top
  • bottom
  • left
  • right
  • z-index

position: fixed;

The element will not remain in the natural flow of the page. It will position itself according to the viewport.

Because it's positioned, it will act as an anchor point for the absolutely positioned pink block.

Also, it will react to the following properties:

  • top
  • bottom
  • left
  • right
  • z-index

#top

Defines the position of the element according to its top edge.

default top: auto;

The element will remain in its natural position.

top: 20px;

If the element is in position relative, the element will move downwards by the amount defined by the top value.

top: 0;

If the element is in position absolute, the element will position itself from the top of the first positioned ancestor.

#z-index

Defines the order of the elements on the z-axis. It only works on positioned elements (anything apart from static).

default z-index: auto;

The order is defined by the order in the HTML code:

  • first in the code = behind
  • last in the code = in front

z-index: 1;

The z-index value is relative to the other ones. The target element is move in front of its siblings.

z-index: -1;

You can use negative values. The target element is move in behind its siblings.