title: Images of different shapes touching each other
body: <p>I have an image that is cut into different pieces. Assume an image that is physically cut into puzzle shaped pieces.</p>
  
  <p>Using HTML and CSS only, how can I align all the pieces of the puzzle so that it looks like a single image after assembling?</p>
  
  <p>I have actual separate pieces, not using something like image maps or sprites.</p>
  
  <p>Edit:
  The problem is not an actual puzzle, it is slightly different. I want the ability for 1 or more of the pieces to be changed, without affecting the look of the whole. </p>
  
  <p>Edit to the problem:
  An addition to the problem is that some of the images might have more than 1 "pieces" with blanks in the middle.
  So, for example,</p>
  
  <p>ABCD<br/>
  EFGH<br/>
  IJKL<br/>
  MNOP<br/></p>
  
  <p>is the original image, with each letter as separate pieces. It is possible that
  <br/>
  A C<br/>
    G<br/>
  is 1 piece, with blanks/transparents for the other places, and not even a complete one. </p>
  
  <p>Meaning:<br/>
  A0C0<br/>
  00G0<br/>
  0000<br/>
  0000<br/></p>
  
  <p>where 0 is the blank place.</p>
  
  <p>The above figure will not exist. It will be</p>
  
  <p>A0C<br/>
  00G<br/></p>
  
  <p>only.</p>
  
  <p>So basically we are looking at overlays. The original positioning of the default pieces would have the images with lowest z-index so that every piece that will be shown will have a higher index.</p>
  
  <p>Sorry for the problem to sound so complex.</p>