DIV Positioning : Fixed, Absolute, and Relative




<!doctype html>
<html lang="en-us">


<!-- HEAD TAG NEEDS TO HAVE LINK TO CSS FILE-->
<head>
  <meta charset="UTF-8">
  <title>Positioning</title>
  <link rel="stylesheet" type="text/css" href="positioning.css">
</head>
<body>
 
 
  <!-- EXAMPLE OF FIXED DIVISION -->
  <div id="fixed">
    <div><br> position: fixed
  </div>

  <div class="wrapper">
  
    <section id="content">
   
      <h1>Heading</h1>
      
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a hendrerit ex, at blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque finibus felis sem, non pulvinar odio fermentum vel. Nunc varius tempus scelerisque.
        Curabitur congue magna vitae velit dictum, eu finibus neque bibendum. In hac habitasse platea dictumst. Aliquam fermentum lobortis felis, in feugiat diam congue ac. </p>
        
      <!-- RELATIVE POSITION DIV -->
      <div id="relative">
        <br> position: relative
        
        <!-- ABSOLUTE POSITION DIV-->
        <div id="absolute">
          <br> position: absolute
        </div>
      </div>
     
      <p>Nulla tempor ornare diam, vitae volutpat erat bibendum eget. Nunc sagittis placerat velit sit amet interdum. Nam in iaculis purus, quis tristique velit. Cras ut nisl vitae orci malesuada placerat non sed magna. Nulla ultrices, dolor at aliquam volutpat,
        lorem magna pharetra arcu, eget feugiat nisi libero at nunc. Phasellus finibus elit at sapien vehicula varius. Maecenas in dapibus leo. Aliquam molestie vulputate metus. Morbi sed posuere quam, et sodales felis. Proin augue nulla, pellentesque
        at venenatis vel, sagittis eget nibh. Maecenas libero velit, luctus eu velit vitae, eleifend convallis felis.</p>
      <p>Nullam imperdiet vehicula dolor eu consectetur. Vestibulum pulvinar lobortis accumsan. Phasellus lobortis pulvinar augue, eu ultrices dui. Donec ut est erat. In facilisis tellus nibh, eu consequat diam commodo a. Nam egestas sapien nunc, ullamcorper
        semper odio feugiat non. Duis et nisl leo. Aliquam consectetur vestibulum turpis. Vivamus non elit ut lorem mattis iaculis. Suspendisse ullamcorper ante orci, et condimentum nisi pharetra id. Praesent ut erat in eros mollis interdum quis ut nisi.
        Etiam ac risus in erat imperdiet sagittis eu sed metus. Etiam molestie ipsum sed vehicula efficitur. Cras eu metus in ex vehicula sodales.</p>
      <p>Maecenas feugiat, ex quis hendrerit interdum, felis ante laoreet sem, vitae tincidunt diam lectus fringilla dolor. Nunc vitae dui sed ligula pharetra sagittis in nec ante. Sed consequat congue vehicula. Donec vel risus at sapien rhoncus consequat
        a lobortis lorem. Mauris ut sem massa. Curabitur ac consequat eros. Nulla non nibh eros. Donec porta condimentum nisi a iaculis. Sed sit amet risus at lacus suscipit accumsan sed ullamcorper lorem. Proin sed egestas risus. Sed egestas ex ac finibus
        ornare.</p>
    </section>
  </div>
  
  
  
</body>
</html>

Posted In CategoriesCSS