title: How can I move/drag an element that is behind a transparent DIV?
body: <p>Im not sure if this is possible.</p>
  
  <p>I am making an upload page where users can upload a picture and manipulate it via drag / resize (jquery) to fit a pre defined template.</p>
  
  <p>I have a DIV with a transparent .png background, which contains the img element. 
  I want to be able to drag and resize the img element, but want the image to appear BEHIND the transparent DIV.</p>
  
  <p>I have tried using z-index, and rearranging the parent / child relationships etc, but whenever my draggable element is set behind the DIV, I cannot drag it or resize it (because its behind the div)</p>
  
  <p>see here for an example of what I have so far: <a href="http://inspirasie.com/uploadtest.html" rel="nofollow">http://inspirasie.com/uploadtest.html</a></p>
  
  <hr>
  
  <p>here is my code:</p>
  
  <hr>
  
  <p>SCRIPT</p>
  
  <pre><code>&lt;script&gt;
    $(function() {
      $("#draggable").draggable({ containment: "#uploadarea"});
      $( "#imagetester" ).resizable({ aspectRatio: true });
    });
    &lt;/script&gt;
  </code></pre>
  
  <hr>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
  
    &lt;div id="uploadarea"&gt;
  
     &lt;div id="imageplacearea"&gt;
  
      &lt;div id="draggable"&gt;
  
       &lt;img id="imagetester" src="images/testpic.jpg"&gt; 
  
      &lt;/div&gt;
  
     &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p>CSS</p>
  
  <pre><code>#draggable {
      display: inline-block;
      background-image: url(../../images/85percent.png);
      background-repeat: repeat;
      opacity:0.7;
      filter:alpha(opacity=70);
  }
  
  #imageplacearea {
      background-image: url(../../images/template.png);
      height: 600px;
      width: 500px;
      background-repeat: no-repeat;
      background-position: center center;
  }
  </code></pre>
  
  <hr>
  
  <p>At the moment, the DIV containing the img, has opacity settings, so I can see whether it is within the border of the #imageplacearea div,</p>
  
  <p>What I want is the image to be full opacity, but BEHIND the #imageplacearea div, and still remain draggable / resizable.</p>
  
  <p>Can this be done? or can anyone suggest an alternative way to achieve what I need to achieve?</p>
  
  <p>Thanks.</p>