一个元素的边距模糊了另一个元素的悬停状态

Question

我有一个基于Flexbox的导航菜单，其中徽标在内联链接的水平中心对齐。我尝试制作的每一支钢笔或小提琴都没有复制我出于某种原因得到的东西，但你可以去to this Flexbox test here这几乎就是我正在做的工作，如果你进入检查员并添加主徽标图像的锚点你会明白我的意思。

设置方式是第三个链接有一个自动应用的左边距，以填补徽标适合的额外间隙。徽标区域与标记中的导航菜单是分开的，但是flexbox布局会将它们放在一起所有这些都相互一致（在较低的断点处，导航菜单向下移动）。

现在这一切都很好，直到您决定将徽标设为可点击链接。当您这样做时，第三个链接的边距会遮挡徽标的悬停状态。

这是一个直观的例子：

因此，如果您尝试将鼠标悬停在边距区域与其相交的徽标上，则无法单击徽标，也无法获得指针光标或任何悬停状态（如背景更改）。在徽标上方的边缘之外，它工作正常，但对于用户来说，他们会认为发生了一些奇怪的事情。如果徽标是img（如原始示例中所示）或SVG（我正在尝试使用），则会发生这种情况。

试图看看是否有办法解决这个问题而不必彻底破坏我的Flexbox布局。我的标记与该示例中使用的标记非常相似。与导航相比，我尝试使用更高的z-index来获取徽标，而导航则不起作用。为导航提供负z-index可让您单击徽标，但无法单击导航项。

Answer 1

您可以为徽标添加相对位置，然后使用z-index进行游戏，使徽标成为第一个元素。

.logo {
    position: relative;
    z-index: 1;
}