在 Chrome 中应用 z-index 后，文本变得非常模糊

Question

我在页面上有带有文本的元素。我注意到与 Firefox 相比，Chrome 中的文本实际上非常模糊。当我从元素中删除 z-index 时，文本变得更清晰。如何在不删除 z 索引的情况下使文本清晰。

这是一个 HTML 代码：

<div class="navigation navigation-fixed">
    <div class="navigation-infouser">
    <a href="/bohdan.andriyiv"><span>Bohdan Andriyiv</span></a>
    </div>
</div>

这是这个 div 的 CSS：

.navigation-fixed {
    position: fixed;
    top: 52px;
    z-index: 11; //when removed text becomes sharper

Answer 1

这与相对定位元素后面的固定位置元素有关。

我的意思是，当您设置了 z-index 属性时，您可能有另一个元素位于上面并“隐藏”您的元素，当您删除它时，文本会变得更清晰，因为现在该元素位于另一个元素之上。