position-2

HTML
<body id="positioning"> <div id="container"> <h1>CSS Positioning</h1> <h2>Relative Position</h2> <div id="relative" class="box">relative</div> <h2>Absolute Position</h2> <div id="absolute" class="box">absolute</div> <h2>Fixed Position</h2> <div id="fixed" class="box">fixed</div> </div><!--#container--> </body>
CSS
*{ margin: 0; padding: 0; font-weight: normal; font-size: 18px; } body{ padding: 40px; font-family: Georgia, Times, serif; color: #373737; } h1, h2, h3, h4, h5, h6{ margin: 10px 0; font-family: Helvetica Neue, Arial, sans-serif; font-weight: bold; } h1{ font-size: 3.6em; } h2{ font-size: 2.6em; } h3{ font-size: 1.6em; letter-spacing: -1px; text-indent: 80px; line-height: 1.3em; } #positioning{ background: #1b4e5e; } #positioning #container{ background: white; padding: 20px; height: 2000px; } #positioning h2{ font-size: 18px; } .box{ background: #db4e3e; color: white; height: 200px; width: 200px; text-align: center; line-height: 200px; text-transform: uppercase; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-weight: bold; } #relative{ position: relative; top: -10px; left: -50px; } #absolute{ position: absolute; bottom: 0; right: 0; } #fixed{ position: fixed; bottom: 10px; left: 40px; }
JAVASCRIPT
Expand for more options Login