title: Position elements of a link
body: <p>I have the following code generated by wordpress so I cannot easily change it;</p>
  
  <pre><code>&lt;li class="post-1685"&gt;
     &lt;a href="/product/goose/"&gt;
        &lt;img width="150" height="150" src="/wp-content/uploads/2014/12/cuit1-150x150.jpeg" class="attachment-shop_catalog wp-post-image"  /&gt;
        &lt;h3&gt;Goose joint for roasting&lt;/h3&gt;
        &lt;span class="price"&gt;&lt;span class="amount"&gt;&amp;pound;90.00&lt;/span&gt;&lt;/span&gt;
     &lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>I want to reposition the H3 element above the image. I can do it with some simple css as follows;</p>
  
  <pre><code>.woocommerce ul.products li.product h3, .woocommerce-page ul.products li.product h3 {
  padding: 0 .2em !important;
  position: relative !important;
  top: -255px !important;
  }
  </code></pre>
  
  <p>but as I don't know how many lines the H3 element will be I don't know how big to make the Top px's</p>
  
  <p>I want to do it in Jquery so I have the H3, followed by the Img without the h3 overlapping the img.</p>
  
  <p>Regards
  Pete</p>