javascript - z-index的picturefill.js问题

我正在使用picturefill来做响应图像。我遇到的问题是我正在调用picturefill（）;一个ajax调用的成功回调方法。动态加载时，将调用picturefill。

效果很好，但问题是，图片填充的图片会覆盖叠加在其顶部的所有元素大约1秒钟。这会导致令人不舒服的效果，因为叠加的元素会突然显示。因此顺序是我们看到元素，元素消失，然后元素从picturefill的图片下面重新出现。

有没有其他人遇到这个问题，并且有人对我该如何处理有任何建议吗？我已经尝试过将图片填充图片的z-index更改为z-index：1，将其他所有内容更改为z-index：200，但仍然没有运气。

添加一些代码：

  <!-- Begin centerimage Container -->

            <!-- Begin rightcaption -->
          <div class="rightcaption">

        OVERLAID CAPTION

          </div>
          <!-- End rightcaption -->

<!-- Begin flip-container -->
<div class= "flip-container">
        <div class= "flipper">
            <div class= "front">
          <div class="main-pic-wrap" id="bloop">

          <div data-picture data-alt="name" data-class="relative_image">
            <div data-src=source> </div>
            <div data-src=img2%> data-media="(min-width: 480px)"></div>
            <div data-src=img3%> data-media="(min-width: 767px)"></div>

            <!--[if (lt IE 9) & (!IEMobile)]>
            <div data-src="medium.jpg"></div>
            <![endif]-->

            <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
            <noscript>
                <img src=img3 alt="Image of Activity">
            </noscript>
          </div>
          </div>



            </div>
            <div class = "back">
                <div id="map"></div>
            </div>

        </div>
    <!-- End flipper -->
    </div>
    <!-- End flip-container container -->



<div id="moreShowHideGroup">
    <div id="mapShowHide" class="icon-globe"></div>
</div>

最佳答案

好吧-终于知道了。所以我相信正在发生的事情是，保存我的图片填充图片和位置的容器在执行picturefill时丢失了它的width属性，因为我认为picturefill.js从DOM中删除了picturefill div，然后取代它。

移除后，我设置为width：100％的容器元素内部没有任何内容可以提供实际宽度，因此它会瞬间折叠，而我的固定位置元素会瞬间消失。

为了防止这种情况，我将另一个位置：宽度为100％的绝对div放到容器中，然后将我的另一个位置：绝对div放到了这个新容器中。所以结构看起来像这样：

    <div class="main" style="position:relative">
      <div data-picture data-alt="name">div data-src=source> </div></div>
      <div class="always-here" style="position:absolute" top:0; left:0;>
        <div class="fixed" style="position:absolute; top:2%; left:2%; ">
        </div>
      </div>
    </div>