<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example of CSS Absolute Positioning</title> <style> .box{ position: absolute; top: 210px; left: 110px; color: blue; width: 60%; background: orange; padding: 30px; } .container{ padding: 60px; margin: 60px; position: relative; border: 10px solid black; font-family: Arial, sans-serif; } .container p{ line-height: 50px; } </style> </head> <body> <div class="container"> <div class="box"> <h2>Absolute Positioned Box</h2> <div><strong>Note:</strong> The left margin edge of this DIV box is shifted to right by 100px from its original position. The whitespace generated is preserved.</div> </div> <p>The Taj Mahal, is an ivory-white marble mausoleum on the right bank of the river Yamuna in the Indian city of Agra.</p> <p>It was commissioned in 1632 by the Mughal emperor Shah Jahan to house the tomb of his favourite wife, Mumtaz Mahal; it also houses the tomb of Shah Jahan himself.</p> </div> </body> </html>