Code
<!DOCTYPE html> <html> <head> <style> div#static{ position:static; width:300px; height:300px; background:red; left:10px; top:100px; } div#absolute { position:absolute; width:300px; height:300px; background:green; left:10px; top:100px; } div#relative { position:relative; width:300px; height:300px; background:green; left:10px; top:100px; } div#fixed { position:fixed; width:300px; height:300px; background:Blue; left:10px; top:100px; } .right { position: absolute; right: 0px; width: 300px; border: 3px solid black; padding: 10px; } </style> <script src="css_postion.js"> </script> </head> <body> <div id="absolute" style="display:none">Absolute <li>CSS is:</li> <p> position:absolute;</p> <p> width:100px;</p> <p> height:100px;</p> <p> background:Blue;</p> <p> left:10px;</p> <p> top:100px</p> </div> <div id="fixed" style="display:none">Fixed <li>CSS is:</li> <p> position:fixed;</p> <p> width:100px;</p> <p> height:100px;</p> <p> background:Blue;</p> <p> left:10px;</p> <p> top:100px</p> </div> <div id="relative" style="display:none">Relative <li>CSS is:</li> <p> position:relative;</p> <p> width:100px;</p> <p> height:100px;</p> <p> background:Blue;</p> <p> left:10px;</p> <p> top:100px</p> </div> <div id="static" style="display:none">Static <li>CSS is:</li> <p> position:static;</p> <p> width:100px;</p> <p> height:100px;</p> <p> background:Blue;</p> <p> left:10px;</p> <p> top:100px</p> </div> <div class="right"> <span id="val"></span> <select align ="right" id = "sel" onchange="position(this.value)"> <option value="00">Select a positon</option> <option value="static"> Static</option> <option value="fixed"> fixed</option> <option value="absolute"> absolute</option> <option value="relative"> relative</option> </select> </div> </body> </html>
Output