css - 我的 float 图标位于我网站内容的后面

Question

我想在我的网站上添加一个 float 图标。我使用的代码是HTML

<a href="#" class="floata">
<i class="fa fa-plus my-floata"></i>
</a>

CSS

.floata{
    position:fixed;
    width:60px;
    height:60px;
    bottom:40px;
    right:40px;
    background-color:#0C9;
    color:#FFF;
    border-radius:50px;
    text-align:center;
    box-shadow: 2px 2px 3px #999;
}

.my-floata{
    margin-top:22px;
}

在我的网站 https://demo.justinechacko.in/ 中，它显示在移动设备上，有时在 PC 上显示在网站内容后面。

Answer 1

看z-index ，这是为了指定绘制节点的图层。

在你的主页上，需要 3 才能覆盖图片:

.floata {
  z-index: 3;
}