CSS – Positioning

  • CSS – Positioning

    • CSS – Positioning Lesson

      To position a HTML element in top, down, left and right in respect of the screen of the page, this property is used. The positioning of elements in CSS can be categorized as,

      • Relative: The position of the HTML element can be changed in respect of its normal position. 

      • Absolute: The HTML element can be positioned at the specific coordinates relative to screen’s top-left position.

      • Fixed: The HTML elements are fixed in particular portion of the page regardless of scrolling.

      The top and left values are used with the above properties to position the element in respective position.

      • Moving left: It requires negative values for left like left:-2px

      • Moving right:  It requires positive values for left like left:40 px

      • Moving up: It requires negative values for top like top:-2px

      • Moving right:  It requires positive values for top like top:80 px


      Example:

      <html>

         <head>

         </head>

         <body>

            <div style = "position:relative; left:80px; top:-2px; background-color:yellow;">

               This div has relative positioning.

            </div>

            <div style = "position:absolute; left:-2px; top:80px; background-color:yellow;">

               This div has absolute positioning.

            </div>

            <div style = "position:fixed; left:100px; top:40px; background-color:yellow;">

               This div has fixed positioning.

            </div>

         </body>

      </html>


      Output:

CSS – Visibility
CSS – Layers