Kapil Kharera's Blog

CSS Positions

Photo by Sincerely Media on Unsplash

CSS Positions

Kapil Kharera's photo
Kapil Kharera
·

3 min read

Table of contents

Position of a element in a page layout is very important and it make our webpage more beautiful . There are many ways to set an element in the page layout and CSS Position property is one of them .

So today we'll discuss about position property and I'll make sure , I explain these concepts in a simple and easy way .

What are the CSS Positions ?

So Position is a property of CSS which allow us to adjust a element as per our requirement into the html layout .

Position property contains five type properties :

  • Static
  • Fixed
  • Relative
  • Absolute
  • Sticky

Note -> After set the position property of element , we gave top , left , right , bottom , z-index , often called offset Properties to adjust the element on desired position .

Let's discuss about the position property with example .

  • Static

    It's the default property of position for every element of html and offset property doesn't with it . It shows the element according to document flow .

HTML

USpp5a-ag.avif

CSS

n-QTTRDZw.avif

Result

Xzv_nYkem.avif

  • Fixed

    This value of position property used to fixed the position of a element and after that it cannot move even scrolling of page . However we set the position of element which we want to fixed by using offset properties .

CSS

Qm0ayFfAv.avif

Result

1KOq__TDj.avif

  • Relative

    This value is used when we want to move the element from its existing/normal position by set the offset properties .It's not affect other elements in layout .

CSS

69AessF7b.avif

Result

w0mGxKyR0.avif

  • Absolute

    It work according to the position of its parent element , after taking the offset properties values . By default its parent element is body .

CSS

CA57fuhBe.avif

Result

cYQ-M8z0e.avif

  • Sticky

It behaves as relative and fixed values. When a user scrolls on a page, elements tends to be relatively positioned and when scrolled to a particular threshold of the offset properties set, elements get fixed at a spot. This value is not commonly used for it is not supported by some browsers.

z-index is applied when you want to stack elements over one another. This property takes either positive or negative interger without any form of measurement e.g > z-index: 1;

yYiAsR3eV.avif

Note -> Just knows about the position is not enough you've to practice it as much as you can and over the time you feel confident to use it .

This was an attempt from my side to make you understand this topic and I hope that I would be able to explain it to you.

Thanks for reading!.

CSScss position layoutHTML5