Hello there, When designing a webpage, there are multiple elements on our page having their own , positions and designs. Positioning elements seems easy at first but as soon as we move further towards a bigger project, things seems not in our hands. But But But... Worry not-after reading this article, all should become clear.

In this tutorial, we will learn about the different position properties in CSS along with their helper properties. Along the way, I’ll show you how to use them in your own CSS code as you build your site.

CSS Positioning specifies the type of positioning method used for each element.In this tutorial I will guide you about different CSS position properties and helper properties and also I will show you how can one use them while building their site.

So ,there are 5 main properties used in CSS positioning:

1.static 2.relative 3.absolute 4.fixed

1. sticky

Firstly we set the position property and after that the coordinates of an element is positioned using helper properties So before starting with CSS position properties in detail lets learn about helper properties which are:

1. top
2. bottom
3. left
4. right
5. z-index top,bottom,left,right move an element in a direction such as top, bottom,left and right, so basically x-axis and y-axis. and z-index can create layers between HTML elements.

Position: static position:static is the default value provided by HTML. If we don’t assign any position property to the elements, it will use position:static by default. top, right, bottom, left doesn’t affect the static positioned element.

codepen.io/abhinavjazz/pen/zYWPMaG

Here we can see that the output is exactly the same as before where no position properties were assigned. All the elements will be positioned according to the normal flow of the document.

2.Position: relative

element is positioned relative to its normal position element can be affected by top, right, bottom, left, z-index element is positioned relatively alone, without position attributes (top, left..) and behaves like static