z-index 始终显示图标

Question

我正在尝试让两个超棒的字体图标始终显示在一系列 div 上。

当用户将鼠标悬停在主要细节上时，我可以让细节被不同背景的边框包围。但是，这确实会阻止图标正确显示。

我知道这需要使用 z-index，但我为正确显示图标所做的所有尝试都失败了。我已经搜索过 SO & Google，但仍然无法解决这个简单的问题。

这就是我想要实现的目标：

这是我目前拥有的：

这是我的 JSFiddle 示例。

非常感谢您提供解决此问题的帮助。

只是一些显示 jsfiddle 的代码：

<div id="id_membership_details_resume_template" class="live_preview_wrapper noselect resumeStyleWrapper10" dir="ltr" style="direction: ltr;">

Answer 1

删除这个

#id_resume_detail_content {
    position: relative;
}

编辑：并针对 X 按钮更新此内容（只是根据 jsfiddle 提供的模板更改了顶部和右侧）

.resume_details_unselect {
    position: absolute;
    right: 15px;
    top: 45px;
    visibility: hidden;
}