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:

absolutefixed, or relative.

Ex.

       .box {

                position: absolute;

               left: 10px;

               top: 20px;

               z-index: 2;

               }

Powered  by Codersarts