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

Question

我使用HTML和CSS(Material Design Blog帮助(来设计对象。该代码在桌面上运行(MS Edge&Chrome(，在移动版(MS Edge和Chrome(中，按钮可以让视差面板前的文本显示出来，它只显示在我的一张图像后面。一个是桌面，我认为它没有同样的问题，因为定位(没有文字可以通过，图像与FAB不一致。

这是HTML:

<a href="tel:[phone]" 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;
}

如果可能的话，我只想把它放在一切的首位。

Answer 1

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

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