CSS Position and Layers

Position:

 The position property defines how an element will be positioned on a page.

​

Static Positioning

It takes by HTML as a default, no need to use positioning keywords.

​

Ex.

            .box {

                           padding: 20px;

                           background: #7dc765;

                   }

​

Relative Positioning

​

Ex.

          .box {

                         position: relative;

                         left: 100px;

                 }

Other positioning keywords.

• Absolute Positioning

• Fixed Positioning

​

Layers:

Use z-index to define layers. It used to move box not only x and y-axis but also z-axis. It used to create complex web pages.

​

Property:

absolute, fixed, or relative.

​

Ex.

       .box {

                position: absolute;

               left: 10px;

               top: 20px;

               z-index: 2;

               }