HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ position: relative; border: 1px solid black; height: 250px; } img{ position: absolute; top: 20%; } </style> </head> <body> <h1>CSS position Property</h1> <p>This is first paragraph.</p> <p>This is second paragraph.</p> <p>This is third paragraph.</p> <div> <img src="apple.png"> </div> <p><strong>Note</strong>: Here CSS position: relative property of div tells the browser that all the child element with position absolute should be relative to myself (div) and not to the main frame. Try to remove div's position: relative and click 'run' button.</p> </body> </html>
OUTPUT
×

Save as Private