CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Layout - The position Property

CSS helps you to position your HTML element. You can put any HTML element at whatever location you like.

The position property specifies how an element is positioned in a document.

There are five different position values:

  • static
  • relative
  • fixed
  • absolute
  • sticky

The top, right, bottom, and left properties determine the final location of positioned elements. They also work differently depending on the position value.


Static Positioning

A static positioned element is always positioned according to the normal flow of the page.

HTML elements are positioned static by default.

Static positioned elements are not affected by the top, right, bottom, left and z-index properties.

position: static;
position: static;
position: static;
position: static;
Run code

Relative Positioning

A relative positioning changes the position of the HTML element relative to where it normally appears.

You can use top and left along with the position property to move an HTML element anywhere in the HTML document.

  • Move Left - Use a negative value for left.
  • Move Right - Use a positive value for left.
  • Move Up - Use a negative value for top.
  • Move Down - Use a positive value for top.
position: static;
position: relative;
position: relative;
position: static;


Run code

Fixed Positioning

The position: fixed; property allows you to fix the position of an element to a particular spot on the page, regardless of scrolling. The element will be relative to the browser window.

Use top, right, bottom, and left properties to position the element.

A fixed element is removed from the flow of the document and does not leave a gap in the page.

Run code

Absolute Positioning

An absolute positioned element is positioned relative to the nearest positioned ancestor (instead of positioned relative to the browser window, like fixed). However, if an absolute positioned element has no positioned ancestors, it uses the browser window, and moves along with page scrolling.

Note: A positioned element is one whose position is anything except static.

An absolute positioned element is removed from the flow of the document and does not leave a gap in the page.

Run code

Sticky Positioning

A sticky element is positioned based on the user's scroll position.

Try to scroll inside this frame to understand how sticky positioning works.

Try to scroll inside this frame to understand how sticky positioning works.

Try to scroll inside this frame to understand how sticky positioning works.

This Paragraph has: position: sticky;

Try to scroll inside this frame to understand how sticky positioning works.

Try to scroll inside this frame to understand how sticky positioning works.

Try to scroll inside this frame to understand how sticky positioning works.

Try to scroll inside this frame to understand how sticky positioning works.

Try to scroll inside this frame to understand how sticky positioning works.

Try to scroll inside this frame to understand how sticky positioning works.

Try to scroll inside this frame to understand how sticky positioning works.

Try to scroll inside this frame to understand how sticky positioning works.

Try to scroll inside this frame to understand how sticky positioning works.

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).

You must also specify at least one of top, right, bottom, and left for sticky positioning to work.

Run code

IE11 and IE10 will render position:sticky; as position:relative;, and Safari requires a -webkit- prefix.


Overlapping Elements

When elements are positioned, they can overlap other elements. To prevent this use z-index property.

The z-index property specifies the z-order of a positioned element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one.

An element can also have a negative z-index value:

Hello, World!

Because the image has z-index:-1;, it will be placed behind the text.

Run code

Absolute Positioning Inside Relative Positioning

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

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

An element with relative positioning gives you the control to absolutely position children elements inside of it.

This example shows that without the absolute div being inside of a relative div, the contents are aligned to the document body:

Run code

Positioning Text Blocks Over Image

The following example shows how to position text or text blocks over an image:

Top Left

Lorem ipsum dolor sit amet.

Top Right

Lorem ipsum dolor sit amet.

Centered

Lorem ipsum dolor sit amet.

Bottom Left

Lorem ipsum dolor sit amet.

Bottom Right

Lorem ipsum dolor sit amet.

Run code

Position Property Values

The position property can have following values:

Value Description
static The element is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect. (This is the default)
relative
The element’s original position remains in the flow of the document, just like the static value
But now left, right, top, bottom and z-index will work
The top and bottom properties specify the vertical offset from its normal position; the left and right properties specify the horizontal offset.
absolute
The element is removed from the flow of the document and other elements will behave as if it’s not even there. Its final position is determined by the values of top, right, bottom, and left.
The top and bottom properties specify the vertical offset; the left and right properties specify the horizontal offset.
fixed
Allows you to fix the position of an element to a particular spot on the page, regardless of scrolling
The top, right, bottom, and left properties are used to position the element
The element is removed from the flow of the document like absolutely positioned elements
sticky
An element with position: sticky; 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: You must also specify at least one of top, right, bottom or left for sticky positioning to work

This DIV element has:

position: fixed;
right: 10px;
bottom: 10px;