0

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

简而言之，在每个帖子上，当光标悬停在帖子上时，菜单（例如，转发等按钮......）变得可见。抱歉，如果我的代码看起来很乱。 header是整个页面的最高元素。里面的一切都是h2按钮菜单，所以它应该一直在下面header。

#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 ;
    }

我很感激任何帮助！也请随时给我与您在上面看到的内容相关的任何提示。谢谢！

编辑：示例照片集帖子的 HTML 标记：

<div id="bin">
    <div id="post">
          <h2> <!-- permalink !-->
              <div class="item" style="max-width:auto; width:auto;">{NoteCount} ♫&lt;/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>

现场预览 http://pianotheme.tumblr.com/

4

4 回答 4

1

应用于带有position:relative;的#top header元素z-index:999;。

此外，您要确保没有多个具有相同id值的 DOM 元素。它们在 DOM 中应该是唯一的……否则，您可能会遇到一些奇怪的行为。

于 2013-06-01T18:15:48.387 回答
0

}你的顶级 CSS 声明还没有结束

您的标题 CSS 中没有任何z-index声明。您应该设置z-index它并确保它具有比当前设置为您的h2. 为了确保它始终位于顶部，您可以将其值设为 1000，用于测试目的。

于 2013-06-01T18:08:57.443 回答
0

z-index仅适用于非static元素。你确实有position: relative，但它不会工作，因为没有其他东西没有z-index: 2定位。你期待什么效果？您希望它高于哪个元素？h2statich2

此外，bu default absolute//将始终保持在同一级别的元素之上。relativestaticstatic

于 2013-06-01T18:49:51.320 回答
0

如果问题只是滚动时按钮和内容与顶部标题重叠，只需在 #top 元素上放置一个高 z-index 即可。例如

#top {
    z-index: 1000;
}
于 2013-06-02T00:46:31.203 回答