css positions

css positions

css position properties help us to position/place elements in a webpage in a variety of different ways.following are css position properties-

1.STATIC-this is the default position of the elements.If no other position property is applied,the elements will arrange themselves in the page in the their respective static position.

2.RELATIVE-this is a property where the element will move with respect to its original position. E.g.-

h1{
    position: relative;
    left: 20px;
    top: 20px;
}

3.ABSOLUTE-on applying this property,the element moves w.r.t webpage(html).it no longer remains a part of its parent and behaves independently.

4.STICKY-we can mention the position where we want the position of an element to get fixed after scrolling till it reaches that particular position.E.g.-navigation section of website or side section.

5.FIXED-by applying this property to an element,it gets fixed to a particular position and will remain there only even if we scroll the webpage.E.g.-chat section or help me section in a website.

6.INHERIT-if we want the child to inherit parent's position,we apply this property.