CSS - Positioning

CSSPositioninghelps to manipulate position of any element in a web page. In this tutorial we will learn position property and values associated with it.

Table of Contents

What is CSS Position?Static Positioned ElementRelative Positioned ElementsAbsolutely Positioned ElementsPosition Fixed ElementSticky Positioned ElementPositioning Text in an ImagePosition Related Properties

What is CSS Position?

In CSSpositionproperty is used to create floating elements, floating sidebar, and other interactive features by adjusting position of elements in webpage.

Along with position property, other properties liketop,bottom,right, andleftare used to control its exact position on the page. They specify the offsets of an element from its edges. We will see examples for those in this tutorial.

Syntax

Following are possible values for css position.

position: static | relative | absolute | fixed | sticky;

Static Positioned Element

When you use theposition: staticproperty, the element will be positioned normally in the document flow. Theleft,right,top,bottom, andz-indexproperties will not affect the element. This is the default value for position property.

Example

In this example we defined two static positioned div elements and one relative positioned element. See the difference.

Relative Positioned Elements

CSSposition: relativeproperty positions the elements relative to their original position in the page. You can use the left, right, top, and bottom properties to move the element around, but it will still take up space in the document flow.

Example

In this example we defined one static positioned div element and one relative positioned element. See the difference.

Absolutely Positioned Elements

An element withposition: absoluteis taken out of the document flow and positioned relative to its nearest positioned ancestor (if any). If there is no positioned ancestor, then the element is positioned relative to the viewport.

You can use top, right, bottom, and left properties to specify the position of the element relative to its containing block.

Example

This example show use of position absolute

Position Fixed Element

In CSSposition: fixedproperty is used to make element stay in the same place on the screen even when the user scrolls. You can then use the left, right, top, and bottom properties to position the element where you want it.

Example

In this example you can see that paragraph element remain there when you scroll down.

Sticky Positioned Element

In CSSposition: stickyproperty is used to make any element stay at the top of container even when the user scrolls. You can then use the left, right, top, and bottom properties to position the element where you want it.

Theposition: stickyproperty is a combination of theposition: relativeandposition: fixedproperties

Example

In this example you can see that when you scroll, fixed move to top

Positioning Text in an Image

In following example, you can use theposition: absoluteproperty to position text in different directions inside an image. The text elements are positioned at the top left, top right, bottom left, and bottom right corners.

Example

In the following example we have positioned text on an image.

CSS Position Related Properties

Following is the list of all the CSS properties related toposition:

PropertyDescriptionExamplebottomUsed with the position property to place the bottom edge of an element.Try ItclipSets the clipping mask for an element.Try ItleftUsed with thepositionproperty to place the left edge of an element.Try ItoverflowDetermines how overflow content is rendered.Try ItrightUsed with thepositionproperty to place the right edge of an element.Try IttopSets the positioning model for an element.Try Itvertical-alignSets the vertical positioning of an element.Try Itz-indexSets the rendering layer for the current element.Try It