CSS Плавающая кнопка действия накладываемых изображений - PullRequest
Новая
       42

CSS Плавающая кнопка действия накладываемых изображений

0 голосов
/ 26 мая 2020

У меня небольшая проблема с нижним колонтитулом и фиксированной кнопкой плавающего действия в моем приложении Rails 6. На больших экранах все работает нормально, но если вы используете приложение на смартфоне и кнопка соприкасается с изображениями в нижнем колонтитуле, изображения накладываются на плавающую кнопку действия.

Вот как это выглядит:

enter image description here

Я пытался изменить 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>

Хорошо, я только что понял анимацию анимации. css вызывает проблему. Если я удалю, все будет нормально. Просто нужно узнать, как сохранить и заставить работать!

...