CSS Position Exercise

by totoromaum

HTML

<div class="parent">
  <div class="box relative">relative</div>
  <div class="box absolute">absolute</div>
  <div class="box fixed">fixed</div>
</div>  

<p>Just a bunch of text for demonstration purposes to make the page scroll. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi praesentium reiciendis veniam, voluptas? Just a bunch of text for demonstration purposes.  Quae tempore voluptate incidunt enim quisquam, eius ex, amet deserunt obcaecati eaque rem. Just a bunch of text for demonstration purposes. Molestias aliquid, rem quasi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Just a bunch of text for demonstration purposes.  Debitis deleniti ex, repellat consectetur, odit harum quis exercitationem vitae corrupti facilis, iste. Just a bunch of text for demonstration purposes. Enim error ab architecto ducimus inventore sequi voluptas id?</p>
<p>Just a bunch of text for demonstration purposes. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi praesentium reiciendis veniam, voluptas? Just a bunch of text for demonstration purposes.  Quae tempore voluptate incidunt enim quisquam, eius ex, amet deserunt obcaecati eaque rem. Just a bunch of text for demonstration purposes. Molestias aliquid, rem quasi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Just a bunch of text for demonstration purposes.  Debitis deleniti ex, repellat consectetur, odit harum quis exercitationem vitae corrupti facilis, iste. Just a bunch of text for demonstration purposes. Enim error ab architecto ducimus inventore sequi voluptas id?</p>
<p>Just a bunch of text for demonstration purposes. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi praesentium reiciendis veniam, voluptas? Just a bunch of text for demonstration purposes.  Quae tempore voluptate incidunt enim quisquam, eius ex, amet deserunt obcaecati eaque rem. Just a bunch of text for demonstration purposes. Molestias aliquid, rem quasi.Lorem ipsum dolor sit amet, consectetur...

CSS

.box { /* box styles */
  width: 60px;
  height: 50px; 
  background: lightblue;
  margin-bottom: 10px;
}
.parent {
  position:relative;

}
.relative { 
  position: relative;
    top:10px;
  left:40px;
}
.absolute {
  position: absolute;
  left: 60px;
  bottom:10px;
}
.fixed {
  position: fixed;
  right:0;
  top:0;
}