如何解决我的网站上有一个浮动操作按钮,但是有问题
我使用HTML和CSS(材料设计博客帮助)来设计对象。该代码可在台式机上运行(MS Edge&Chrome),移动版(MS Edge&Chrome)按钮可显示Parallax面板前面的文本,并且仅在我的一张图像后面。我认为一种台式机由于定位而不会遇到相同的问题(无字可说,图像与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;
}
如果可能的话,我只是想把它放在一切之上。
解决方法
使用大于主要内容的z-index
值,默认值为0。您也可以考虑使用position: absolute
锁定CTA按钮。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。