Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

html
css
position attribute
communitycreator

What are positioning elements in CSS?

Behzad Ahmad

Overview

The positioning elements in CSSCascading Style Sheet define the position of the HTML entity or the element. In CSS, there are five different types of positioning properties available:

  • Fixed

  • Static

  • Relative

  • Absolute

  • Sticky

Fixed

An element with the position fixed always stays in the same place even if we scroll the page. It remains in the same place. The properties are used to position the elements on the left, right, top, and bottom.

Fixed position element

Static

The static method of positioning is set by default. Such elements are not affected by the properties of the left, right, top, and bottom. It is always positioned according to the normal flow of the page. It is not positioned in any other special way.

Static position element

Relative

An element with a relative position is positioned relative to its normal position. If we set up the left, right, top, and bottom, we won’t be able to fill the gap left by this element.

Relative position element

Absolute

An element with the absolute position is positioned with respect to its parent. It doesn’t depend on the elements under the same level or the siblings.

Absolute position element

Sticky

An element with the sticky position is positioned according to the position of the user’s scroll.

Depending upon the position of the scroll, the sticky element toggles between the fixed and relative.

Sticky position element

RELATED TAGS

html
css
position attribute
communitycreator
RELATED COURSES

View all Courses

Keep Exploring