title: "Locking" image in place in div
body: <p>I want to place an image at a certain place in a div, but it moves behind another div when resizing the window. I need it to be at the same place, at all times. </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="gallery"&gt;
  
  &lt;div id="gallerytext"&gt;
  &lt;p&gt;This week's&lt;br /&gt;heroes&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="kranz"&gt;
  &lt;img src="images/kranz.png" alt="kranz" width="310px" /&gt;
  &lt;/div&gt;
  
  &lt;div id="pic1"&gt;
  &lt;img src="frontgallery/1.jpg" alt="gallery image 1" width="20%" /&gt;
  &lt;/div&gt;
  
  &lt;div id="pic2"&gt;
  &lt;img src="frontgallery/2.jpg" alt="gallery image 2" width="20%" /&gt;
  &lt;/div&gt;
  
  &lt;div id="pic3"&gt;
  &lt;img src="frontgallery/3.jpg" alt="gallery image 3" width="20%" /&gt;
  &lt;/div&gt;
  
  &lt;div id="pic4"&gt;
  &lt;img src="frontgallery/4.jpg" alt="gallery image 4" width="20%" /&gt;
  &lt;/div&gt;
  
  &lt;div id="pic5"&gt;
  &lt;img src="frontgallery/5.jpg" alt="gallery image 5" width="20%" /&gt;
  &lt;/div&gt;
  
  &lt;div id="pic6"&gt;
  &lt;img src="frontgallery/6.jpg" alt="gallery image 6" width="25%" /&gt;
  &lt;/div&gt;
  
  &lt;div id="pic7"&gt;
  &lt;img src="frontgallery/7.jpg" alt="gallery image 7" width="20%" /&gt;
  &lt;/div&gt;
  
  &lt;div id="pic8"&gt;
  &lt;img src="frontgallery/8.jpg" alt="gallery image 8" width="20%" /&gt;
  &lt;/div&gt;
  
  &lt;div id="pic9"&gt;
  &lt;img src="frontgallery/9.jpg" alt="gallery image 9" width="20%" /&gt;
  &lt;/div&gt;
  
  &lt;div id="entergal"&gt;
  &lt;a href="index.html"&gt;Enter contest&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>#kranz img {
      position:absolute;
      left:42%;
      margin-left:-50px;
      margin-top:-13%;
      width:275px;
  }
  </code></pre>
  
  <p>The images in the "gallery" are placed like this: </p>
  
  <pre><code>#pic2 img {
      display:block;
      float:left;
      margin-left:10%;
      margin-top:10%;
      -moz-box-shadow: 5px 5px 10x #000000;
      -webkit-box-shadow: 5px 5px 10px #000000;
      box-shadow: 5px 5px 10px #000000;
  }
  </code></pre>