position: relative;

The position relative helps to shift an element relative to its normal position. It allows us to adjust with top, right, bottom, or left properties.

<!DOCTYPE html>
<head>
    <title>Relative Positioning</title>
    <style>
           p {
               position: relative;
               left: 100px;
               top: 300px;
           }
    </style>
</head>
<body>
      <p>The position relative helps to shift an element relative to its normal position. It allows you to adjust with top, right, bottom, or left properties. </p>
</body>
</html>

 <!DOCTYPE html>
    <html>
     <head>
        <title>Relative Positioning</title>
<style>

.parent {
     position: relative;
     left: 100px;
     top: 100px;
     width: 300px;
     height: 200px;
     border: 5px solid #f542e6;
   } 
   
   .child {
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     width: 150px;
     height: 100px;
     border: 4px solid #f542e6;
   }
   
   </style>
   </head>
   <body>
   
   <div class="parent">Parent 
     <div class="child">Child</div>
   </div>
   
   </body>
   </html>

NEW POSTS

Main Menu

position: relative;

No comments

Post a Comment

Pages

NEW POSTS

Main Menu

position: relative;

You Might Also Like

No comments

Post a Comment

Pages