Edit in JSFiddle

<br /><br />

<div id="absdiv1">
    <br /><span class="bold">DIV #1</span>
    <br />position: absolute;
</div>
 
<div id="flodiv1">
    <br /><span class="bold">DIV #2</span>
    <br />float: left;
</div>
 
<div id="flodiv2">
    <br /><span class="bold">DIV #3</span>
    <br />float: right;
</div>
 
<br />
 
<div id="normdiv">
    <br /><span class="bold">DIV #4</span>
    <br />no positioning
</div>
 
<div id="absdiv2">
    <br /><span class="bold">DIV #5</span>
    <br />position: absolute;
</div>

div {
   font: 12px Arial;
}
 
span.bold { font-weight: bold; }
 
#absdiv1 {
   opacity: 0.7;
   position: absolute;
   width: 150px;
   height: 200px;
   top: 10px;
   right: 140px;
   border: 1px dashed #990000;
   background-color: #ffdddd;
   text-align: center;
}
 
#normdiv {
   /*opacity: 0.7;*/
   height: 100px;
   border: 1px dashed #999966;
   background-color: #ffffcc;
   margin: 0px 10px 0px 10px;
   text-align: left;
}
 
#flodiv1 {
   opacity: 0.7;
   margin: 0px 10px 0px 20px;
   float: left;
   width: 150px;
   height: 200px;
   border: 1px dashed #009900;
   background-color: #ccffcc;
   text-align: center;
}
 
#flodiv2 {
   opacity: 0.7;
   margin: 0px 20px 0px 10px;
   float: right;
   width: 150px;
   height: 200px;
   border: 1px dashed #009900;
   background-color: #ccffcc;
   text-align: center;
}
 
#absdiv2 {
   opacity: 0.7;
   position: absolute;
   width: 150px;
   height: 100px;
   top: 130px;
   left: 100px;
   border: 1px dashed #990000;
   background-color: #ffdddd;
   text-align: center;
}