how to set the position of an image in html
<!-- There are five different position values: static, relative, fixed, absolute and sticky --> <!-- static --> <head> <style> div.static { position: static; } </style> </head> <body> <div class="static"> This div element is static. </div> </body> <!-- relative --> <head> <style> div.relative { position: relative; left: 30px; } </style> </head> <body> <div class="relative"> This div element is relative. </div> </body> <!-- fixed --> <head> <style> div.fixed { position: fixed; bottom: 0; right: 0; width: 300px; } </style> </head> <body> <div class="fixed"> This div element is fixed. </div> </body> <!-- absolute --> <head> <style> div.relative { position: relative; width: 400px; height: 200px; } div.absolute { position: absolute; top: 80px; right: 0; width: 200px; height: 100px; } </style> </head> <body> <div class="relative">This div element has position: relative; <div class="absolute">This div element has position: absolute;</div> </div> </body> // sticky <head> <style> div.sticky { position: -webkit-sticky; position: sticky; top: 0; padding: 5px; background-color: #cae8ca; border: 2px solid #4CAF50; } </style> </head> <body> <div class="sticky">I am sticky!</div> <div style="padding-bottom:2000px"> <p>The sticky element sticks to the top of the page (top: 0), when you reach its scroll position.</p> </div> </body>
