我的网站上有一个浮动操作按钮，但有问题答案

【问题标题】：I have a Floating Action Button on my site but there are problems我的网站上有一个浮动操作按钮，但有问题
【发布时间】：2020-09-05 03:24:18
【问题描述】：

我使用 HTML 和 CSS（材料设计博客帮助）来设计对象。代码在桌面上工作（MS Edge 和 Chrome），移动版本（MS Edge 和 Chrome）按钮让视差面板前面的文本显示出来，它只在我的一张图像后面。一个桌面，我认为它只是没有相同的问题，因为定位（没有文字要经过，图像不与 FAB 内联。

这是 HTML：

<a href="tel:9788888888" class="fab" >Call</a>

该网站将其放置在一个 div 中： <div class="fab">Call</div> 但我需要它是一个不使用 JQuery 的链接，以便它可以访问电话。使用的 CSS 代码（包括注释掉的项目）：

   .fab {
   width: 90px;
   height: 70px;
   background-color: #8BC34A;
   border-radius: 50%;
   box-shadow: 0 6px 10px 0 #666;
  /* transition: all 0.1s ease-in-out;*/
 
   font-size: 40px;
   color: white;
   text-align: center;
   line-height: 70px;
 
   position: fixed;
   right:  50px;
   bottom: 50px;
}
 
.fab:hover {
   box-shadow: 0 6px 14px 0 #666;
   /*transform: scale(1.05);*/
   color: black;
}

如果可能的话，我只是想把它放在一切之上。

【问题讨论】：

欢迎来到 StackOverflow！您能以minimal reproducible example 的形式提出您的问题吗？这将帮助我们找出您遇到的确切问题
你试过给它z-index值吗？
对不起，我试图将 z-index 值更改为高于视差 55 的数字，我尝试了 60 和 100，但我仍然在电话上遇到同样的问题（在其他屏幕上，文本不在 Fab 下）将位置更改为绝对位置使其一起消失。我只给出了与 HTML 和 CSS 相关的部分代码，如果我添加了一些不必要的东西（代码方面），我认为没有办法让它比我做的更简约对不起。

标签： html css mobile floating-action-button

【解决方案1】：

使用大于主要内容的z-index 值，0 是默认值。您也可以考虑使用 position: absolute 锁定就地 CTA 按钮。

https://www.w3schools.com/cssref/pr_pos_z-index.asp

【讨论】：