Css Z索引和不透明度未按预期工作

我正在尝试制作一个原创的tumblr博客主题。这是我第一次从头开始写，虽然CSS对我来说并不新鲜。然而，Z索引

简而言之，当光标悬停在帖子上时，在每篇帖子上都会出现一个菜单（如reblog等按钮…）。如果我的代码看起来很乱，我会道歉。

标题

是整个页面上的最高元素。

h2

中的所有内容都是按钮菜单，因此它应始终位于

标题下

#top header{
    font-family:"Open Sans Condensed", sans-serif;
    font-size:3.5em;
    padding:0px;
    margin-top:-8px;
    height:72px;
    text-transform:uppercase;
    color:#fff;
    background-color:{color:Base};
    width:100%;
    text-align:center;
    -webkit-box-shadow:  1px 1px 3px 0px rgba(0, 0, 0, .6);
    box-shadow:  1px 1px 3px 0px rgba(0, 0, 0, .6);
    -webkit-transition: all 3s ease-in-out;
    -moz-transition: all 3s ease-in-out;
    -ms-transition: all 3s ease-in-out;
    -o-transition: all 3s ease-in-out;
    transition: all 3s ease-in-out;
}
    #post h2 {
        float:left;
        width:auto;
        margin:5px 4px -130px -10px;
        opacity:0.0;
        position:relative;
        z-index:2;
        padding-left:5px;
        font-family:"Calibri", sans-serif;
        text-decoration:none;
        -webkit-transition: all .6s ;
        -moz-transition: all .6s ;
        -ms-transition: all .6s ;
        -o-transition: all .6s ;
        transition: all .6s ;
    }

    #post h2 a{
        color: #fff;
        font-family:calibri;
    }

    #post h2 .item{
        width:20px;
        color:#fff;
        background-color:#5C5C5C;
        margin-bottom: 4px;
        padding:3px;
        -webkit-box-shadow:  1px 1px 3px 0px rgba(0, 0, 0, .6);
        box-shadow:  1px 1px 3px 0px rgba(0, 0, 0, .6);
        -webkit-border-radius: 4px;
        border-radius: 4px;
        text-align:center;
        -webkit-transition: all .6s ;
            -moz-transition: all .6s ;
            -ms-transition: all .6s ;
            -o-transition: all .6s ;
            transition: all .6s ;
    }

    #post h2 .item:hover{
        background-color:{color:Post Accent};
        -webkit-transition: all .6s ;
            -moz-transition: all .6s ;
            -ms-transition: all .6s ;
            -o-transition: all .6s ;
            transition: all .6s ;
    }    


    #post h2 {
        color:#ccc;
        margin-left:0px;
        opacity:1.0;
        z-index:2!important;
        -webkit-transition: all .6s ;
            -moz-transition: all .6s ;
            -ms-transition: all .6s ;
            -o-transition: all .6s ;
            transition: all .6s ;
    }

谢谢你的帮助！也请随时给我任何提示与你看到上面。
谢谢

编辑：
示例photoset文章的HTML标记：

<div id="bin">
    <div id="post">
          <h2> <!-- permalink !-->
              <div class="item" style="max-width:auto; width:auto;">{NoteCount} ♫</div>
              <div class="item" style="padding-top:5px; padding-bottom:0px;">{LikeButton}</div>
              <div class="item">{ReblogButton}</div>
              <div class="item"><a href="{Permalink}">&#8734;</a></div>
          </h2>


          <div id="photoset">
               <div class="photoset">
                        {Photoset}
                </div>
          </div>
          {block:Caption}
              {Caption}
          {/block:Caption}

          <div id="date">
              {TimeAgo}
          </div>
</div>
                </div>


{notecont}♫
{LikeButton}
{ReblogButton}
{Photoset}
{块：标题}
{标题}
{/block:Caption}
{TimeAgo}

现场预览
您的CSS声明顶部没有结束语
}

您没有在头CSS中声明任何
z-index
。您应该设置
z-index
，并确保它的值高于当前设置的
h2
。为了确保它始终位于顶部，您可以为它设置一个1000的值，用于测试目的。
应用
位置：相对到带有
z-index:999的
#顶部标题
元素

此外，还需要确保没有多个DOM元素具有相同的
id
值。它们在DOM中应该是唯一的……否则，您可能会得到一些奇怪的行为。
z-index
仅适用于非
静态
元素。您在
h2
上确实有
位置：相对的
和
z-index:2
，但它不起作用，因为没有其他任何东西具有非
静态的
定位。您希望从
h2
中获得什么效果？您希望它位于哪个元素之上

此外，bu默认值
绝对值
/
相对值
/
静态值
将始终位于同一级别的
静态值
元素上方。
如果问题只是滚动时按钮和内容与顶部标题重叠，只需在顶部元素上放置一个较高的z索引即可。例如

#top {
    z-index: 1000;
}

我刚刚检查了我的原始代码，右括号在里面，但不知为什么它没有复制粘贴？无论如何，我现在已经修复了上面的代码。谢谢你指出这一点。真的有必要让你的选择器这么长吗？是否有
#bin
或
#post
出现在
#wrapper
之外的实例？当没有标记时，很难诊断问题。我们也喜欢演示（请参阅：）。我之所以有这样的特定选择器，是为了让html部分更容易编码，我会知道在哪里查找。有些人喜欢这个主意，有些人不喜欢。没有#bin或#post出现在#wrapper之外的实例。更改选择器，如
#wrapper#bin#post h2。项目：悬停
到
#post h2。项目：悬停{
。当你使用
id
时，没有必要使用那么长的选择器。好吧，这很有意义。谢谢。我很难理解确切的问题是什么，你能更具体一点吗？另外，一个Codpen或JSfiddle，或者一个实例可能也会有所帮助：）没有人说他有多个具有相同id的项目，事实上，他是相反。@Madara，请随意指出Kitsu在其原始帖子中明确指出，他没有具有相同
id
的元素。他最初发布的唯一内容是他的CSS。我只是指出，他可能希望确保情况并非如此，同时给他一些尝试。看到Kitsu ha很高兴s现在更新了他的帖子，加入了HTML。@fletch:不是在原来的帖子中，而是在对这个问题的评论中。@Madara，你一定是在阅读评论，因为Kitsu也没有明确提到避免重复的
id
值……但是，不用担心。我只是在我的原始答案中加入了这一点作为p更改检查。我一直在乱搞我的代码，以至于忘了重新添加定位。但无论如何，起初我尝试在标题上定位，但似乎也不起作用。它工作得很好！为什么我没有想到呢？多谢各位！没问题。我总是先寻找最简单的选项：-)