I use a "position: absolute" in a div "position: relative". Is does not work.

[ZE3kr]

Such as

<div style="position: relative;bottom: 5em;left: 2px;">
  <a href="http://ze3kr.com/video/2014/07/12/s1/#video" title="Play">
    <img src="http://ze3kr.com/image/play.png" style="position: absolute;width: 72px;height: 72px;" class="js-plaxify" data-xrange="20" data-yrange="20" />
  </a>
</div>

var layers = $('.js-plaxify')

$(document).ready(function () {
    $.plax.enable()
})

It's does not work. I find "inViewport" is wrong, When elements in the Viewport, it is not recognized. When I was at the top of the page (not the actual inViewport), but it is recognized inViewport.

And I Change the HTML like that

<div style="position: relative;bottom: 5em;left: 2px;" class="js-plaxify" data-xrange="20" data-yrange="20">
  <a href="http://ze3kr.com/video/2014/07/12/s1/#video" title="Play">
    <img src="http://ze3kr.com/image/play.png" style="position: absolute;width: 72px;height: 72px;"  />
  </a>
</div>

It still not work. But I find it Automatically add this

div .js-plaxify {
  left: 173px;
  top: 936px;
}

At last, I add this and at finally it works.

layer.obj.css('position', absolute);

[classicemi]

I guess it's because the inViewport function returns false. The parent Element's offsetHeight is 0 when the element contains only one child element and the child element's position is absolute.

I think the only way to solve this problem is giving the absolute positioned element a wrapper to expand the parent element's offsetHeight if we don't change the inViewport function.