title: Stellar JS (parallax plugin) positioning issue
body: <p>I'm creating a parallax site with stellar js, and I'm having serious trouble with the positioning of elements within a "slide." all of my elements are perfectly aligned with the given css; however, as soon as I add a 'data-stellar-ratio' attribute to the images, their position is completely screwed up. there is no discernible pattern to the screwy offset, or I'd just adjust the css.   </p>
  
  <p>here's my html</p>
  
  <pre><code>&lt;body&gt;
    &lt;div id="scrollContainer"&gt;
      &lt;div id="scroller"&gt;
  
          &lt;section data-slide="1" class="slide" id="slide1" &gt; &lt;!-- Home Screen --&gt;
              &lt;img class="part" data-stellar-ratio="1.5"  src="images/vi.svg" alt=""&gt;
              &lt;img class="part" data-stellar-ratio="2" src="images/nyl.svg" alt=""&gt;
              &lt;img class="part" data-stellar-ratio="3"  src="images/vibe.svg" alt=""&gt;
              &lt;img class="part" data-stellar-ratio="2.5"  src="images/whitaker.svg" alt=""&gt;
              &lt;img class="part" data-stellar-ratio="1"  src="images/red.svg" alt=""&gt;
          &lt;/section&gt; &lt;!-- END Home --&gt;
  </code></pre>
  
  <p>Each "section.slide" is set to "position: relative;" and the child images are set to absolute. Here's my css</p>
  
  <pre><code>    #scroller
      {
      text-align: left;
      width: 960px;
      margin: 0 auto;
      padding:0;
      }
      section.slide { position:relative; width:960px; height: 728px;}
      .part { position:absolute; }
  
      section#slide1 {background: #f2f2f2; width:100%;}
      section#slide1 .part:first-child  { width:524px; left:-297px; top:715px; } /* vi */
      section#slide1 .part:nth-child(2) { width:780px; left:159px; top:1072px; /*bottom:-344px;*/} /* nyl */
      section#slide1 .part:nth-child(3) { width:395px; left:357px; top: 525px; /*bottom:203px;*/ } /*vibe*/
      section#slide1 .part:nth-child(4) { width:641px; left:599px; top: 590px; /*bottom:138px;*/ } /*whitaker*/
      section#slide1 .part:nth-child(5) { width:424px; left:28px; top: 842px; /*bottom:-114px;*/ } /*red*/ 
  </code></pre>
  
  <p>Does anyone know an appropriate solution? Thanks for any help!! I've been at it for 3 hours, and have found no solution by trial, nor have I found one online.  </p>