Html 如何将Vue组件中的图标覆盖在另一个图标上？

我有一个Vue组件：

<template>
    <span>
        <i  class="fas fa-file-pdf icon_styling"
            v-bind:style="`color: ` +  fileStatusColor()" ></i>
        <i  class="fas fa-paperclip icon_addition_styling" 
            v-if={{showIcon}}></i>
        {{ mytext }}
    </span>
</template>

{{mytext}}

我想在另一个图标上显示回形针

---

不幸的是，位于的解决方案无法在整个页面上定位，而不是在my vue组件中定位

我的第二个想法是在图标上使用负边距，但这也会移动文本

---

有没有办法让图标在我的vue组件中覆盖html5/css？

Fontsome实际支持

---

Fontsome实际上支持

在整个页面上定向，而不是在我的vue组件中定向。

-->添加位置：相对于component@TemaniAfif你的意思是我应该把它放进跨度里吗？否则，如何使用依赖于使用

position:absolute

的解决方案？position:absolute元素将根据其第一个postinated祖先进行定位。。因此，为了避免将页面作为引用，请将父元素或引用设置为position:relative

position:absolute

将元素从文档流中取出（父元素的行为就像它不在文档流中一样），并将元素相对于其最近的祖先进行定位。其中“定位”是指：具有除静态<代码>以外的设定位置值。因此，在父对象上设置

position:relative

，作为定位

position:absolute

子对象的参考。阅读。因此，如果您想使用

（而不是页面）作为回形针的参考，请提供

style=“position:relative；”

在整个页面上定向，而不是在我的vue组件中定向。

-->添加位置：相对于component@TemaniAfif你的意思是我应该把它放进跨度里吗？否则，如何使用依赖于使用

position:absolute

的解决方案？position:absolute元素将根据其第一个postinated祖先进行定位。。因此，为了避免将页面作为引用，请将父元素或引用设置为position:relative

position:absolute

将元素从文档流中取出（父元素的行为就像它不在文档流中一样），并将元素相对于其最近的祖先进行定位。其中“定位”是指：具有除静态<代码>以外的设定位置值。因此，在父对象上设置

position:relative

，作为定位

position:absolute

子对象的参考。阅读。因此，如果您想使用

（而不是页面）作为回形针的参考，请提供

style=“position:relative；”“