css - 绝对定位按钮不会出现在固定标题上

Question

我有这个非常简单的固定菜单栏，请参阅 here , 现在菜单底部有这个元素，如下所示:

这是现在所有其他页面上的菜单:

现在在这个特定页面上，出于某种原因我无法显示元素(带有灰色图标的视频图标)。现在，如果我检查开发人员工具，我会发现该元素确实存在:

<a href="#" id="btn-our-story" class="btn-our-story tooltip tooltipstered" data-target="#our-story-vedio"> <img src="http://codeandcode.co/demo/idea_spice/images/res/our-story-btn.png" alt="Our story vedio icon"> </a>

CSS 代码:

header .btn-our-story {
    position: absolute;
    bottom: 0;
    left: 0;
    height: auto;
    width: 100%;
    padding: 50px 0 42px;
    background: #f4f4f4;
    -webkit-transition: background-color .3s;
    -o-transition: background-color .3s;
    transition: background-color .3s;
    text-decoration: none;
}

仍然没有出现视频图标，我看到的是:

为什么没有出现灰色图标？我看不出它不应该出现的明显原因，但它就是没有出现。

Answer 1

您的元素 .tooltip 不透明度为 0。您应该将其更改为 1，如下所示:

header .btn-our-story {
    opacity: 1
}