CSS图像叠加了浮动操作按钮

Question

在Rails 6应用程序中，页脚和固定位置浮动操作按钮有一个小问题。在较大的屏幕上，一切正常，但如果您在智能手机上使用该应用程序，并且该按钮与页脚中的图像接触，则这些图像将位于浮动操作按钮上。

这是它的样子：

我试图更改两个元素的z-index，但是没有用。它发生在不同类型的图像上，这是一种png，但也发生在svg图片上。

这是按钮的CSS：

.floating_action_btn {
   width: 70px;
   height: 70px;
   background-color: #F56117;
   border-radius: 50%;
   box-shadow: 0 6px 10px 0 #666;
   transition: all 0.4s ease-in-out;
   font-size: 40px;
   color: white;
   text-align: center;
   line-height: 70px;
   position: fixed;
   right: 30px;
   bottom: 30px;
   &:hover {
        box-shadow: 0 6px 14px 0 #666;
        transform: scale(1.05); 
        background-color: white;
        color: #F56117;
   }
}

那就是页脚：

<footer class="sticky-footer page_footer bg-light">
    <div class="d-flex flex-wrap justify-content-around align-items-center mt-2">
    <% if Configuration.first.image.attached? %>
        <div class="row">
            <div class="col-xl-4 col-lg-4 col-md-12">
                <%= link_to image_tag(Configuration.first.image, size: "300x48", alt: "BDH Klinik Braunfels", class: "img-responsive"), "https://www.bdh-klinik-braunfels.de" %>
            </div>
            <div class="col-xl-4 col-lg-4 col-md-12">
                <p class="ml-5 mr-5 mt-3 text-muted">in Kooperation mit</p>
            </div>
            <div class="col-xl-4 col-lg-4 col-md-12">
                <%= link_to image_pack_tag("thm_ges_logo.svg", size: "300x48", alt: "THM Fachbereich Gesundheit"), "https://www.thm.de/ges" %>
            </div>
        </div>
    <% else %>
        <%= content_tag(:div, "Es wurde noch kein Bild ausgewählt!", class: ["text-muted", "font-weight-bold"]) %>
    <% end %>
    </div>
        <i class="far fa-copyright text-muted mt-3">&nbsp;<%= 2020 == Date.current.year ? '' : '2020 - ' %><%= Date.current.year %> - by Maximilian Kirsch</i>
</footer>

好吧，我刚刚发现animate.css的动画引起了问题。如果我删除它，它可以正常工作。只需了解如何使其保持正常工作！