Question

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

简而言之，在每个帖子上，当光标悬停在帖子上时，菜单（如，reblog等按钮......）变为可见。如果我的代码看起来很混乱，请道歉。 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} ♫</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/

Answer 1

使用position:relative;将#top header元素应用于z-index:999;元素。

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

Answer 2

您的顶级CSS声明中没有结束}

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

Answer 3

z-index仅适用于非static元素。您position: relative上确实有z-index: 2和h2，但由于没有其他任何非static定位，因此无效。您对h2的期望是什么？你希望它在哪个元素之上？

此外，默认absolute / relative / static将始终保持在同一级别的static元素之上。

Answer 4

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

#top {
    z-index: 1000;
}

Z-Index和Opacity无法按预期工作

4 个答案: