CSS Position Proparty

The Interesting And Very Imported CSS Topic is Position Property

There is 5 Types of Position Value.

01.Position: Relative.

02.Position: Absolute.

         03.Position: Static.

         04. Position: Fixed.

         05.Position: Sticky.

01. Position: Relative

This is a position property of CSS on which the Absolute property is generated. Relatives are parent class.

Absolute property is generated on that parent element. Absolute property depends on relative property.

Code;

        

        .PerentClass {

            position: relative;

          }

Ex: 

(Examples of Relative and Absolute will be given together।)

02. Position: Absolute

This is a position property of CSS which is generated based on  relative position. That is, the position of the element that is relative is generated in the foregroundly applied  above that element. The height of the absolute property and the hide of the relative element are generated on it. Then the absolute element takes the field of the relative element as its field.

Code:

        #child1 {

            position: absolute;

            top: 50px;

            right: 20px;

          }

Ex:

03. Position: Static

This is the default position of css. It is a generator according to the size of the screen.

Code:

        

        .parent {

            position: static;

            width: 300px;

            height: 100px;

          }

Ex:

04. Position: Fixed

An element with position: fixed; Position is subject to viewport, which means that even if the page is scrolled, it is always in the same place. The upper, right, bottom and left features are used for the position of the element.

Code:

         

         

        div.fixed {

            position: fixed;

            bottom: 0;

            right: 0;

            width: 300px;

            border: 3px solid #73AD21;

          }

Ex:

05. Position: Sticky

An element with (position: sticky;) Position is based on user scroll position.

A sticky element toggles between relative and stationary, depending on the scroll position. It is positioned relative to the viewport until a given offset position is filled - then it is "sticked" in place (e.g. position: fixed).

Code:

        .box h1 {

            background-color: orange;

            position: sticky;

            top: 0;

        }

Ex: