logo

CSS

Simple

Position Property

Used for positioning a element with different methods

Types of position value:

  • Static
  • Relative
  • Fixed
  • Absolute
  • Sticky

Static

  1. It's the default value for any element
  2. Top, right, bottom, left properties doesn't have any effect on this

Example

  • postion: static;

    This is a Static Element

Relative

  • Top, left, right, bottom properties have effect.
  • Basically by using let's say left property set to 10px we can change the initial left position shift to right by 10px of that element.
  • Other elements will not adjust and it will overlap other elements if not used properly.
  • Because of this element we have the horizontal scrollbar in this page, first example.

Examples

  1. postion: relative; left: 10px

    This element is 10px shifted from left

  2. postion: relative; top: 10px

    This element is 10px shifted from top

  3. postion: relative; right: 10px

    This element is 10px shifted from right

Fixed

  • Using this properly on a element we can make sure the element always stays on screen.
  • Even if we scroll it will stay there
  • Top, right, left, bottom is used to determine where that fixed element should stay.

Example

  1. position: fixed; right: 0; bottom: 10%;

    This element has the fixed property

Absolute

  • A absolute positioned element will be relative to it's parent element.
  • As relatively positioned elements acted it will do the same but in absolute it will be relstive to it's parent.
  • When no parent element it will be relative to the body.

Example

  1. position: absolute; width: 200px; top: 30px; left: 300px;

    This element has postion property set to absolute.

Sticky

  • Sticky elements behave like relative and fixed elements simultaneously.
  • When a certain condition(reached scroll position) it sticks there.
  • It behaves like a fixed element inside it's parent element. Not only body.

Example

  1. position: sticky;

This is a sticky element