Mobile: the execution of the animation of css3 affects the elements that the fixed locates to its upper layer

< H2 > problem description: < / H2 >

use bootstrap to practice responsive web page development. When you want to animate an element with a background image, it is found that the animation will have an impact on the elements that are located above it with position:fixed; .
found that in the process of animation, the elements that should be in the lower level run to the level of fixed positioning elements. It took hours to find out the cause in many ways, but still couldn"t find the problem. I hope you will not hesitate to give us your advice. Thank you in advance.

< H2 > problem status chart: < / H2 >

Photo caption: the button in the upper right corner of the
picture uses the element of position:fixed . Below it is a div that needs animation, and the transparency animation of div will also affect this button.

< H2 > Code < / H2 >


    $(function ($) {
      $("body").niceScroll()
    })
  </script>
</body>

</html>

those who want to know the reason can tell me the principle, and those who know the solution can also tell ~
(I found that I wrapped the html code in a code block but didn"t highlight it at all? )