position: absolute; - Comforting Tools

Absolute positioning covers only the given element. It can shift or stretch or contract to fulfill all the mentioned left, right, bottom, or top properties.

If a parent element has got the position: relative; and its child element has the position: absolute; the child element adjusts its position within the parent element. If the element does not have the parent or the parent element is not having the position: relative; the absolute positioning of the child takes reference from the body.

<!DOCTYPE html>
    <html>
     <head>
        <title>Absolute Position</title>
   <style>
       p {
        position: absolute;
        left: 200px;
        right: 150px;
        bottom: 100px;
        top: 100px;
        background: #f542e6;
    }
   </style>
   </head>
   <body>
 
    <p>Absolute Position</p> 
 
</body>
   </html>