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 headerz-index:999;

idまた、同じ値を持つ複数の DOM 要素がないことを確認する必要があります。それらは DOM 内で一意である必要があります...そうしないと、奇妙な動作が発生する可能性があります。

于 2013-06-01T18:15:48.387 に答える
0

}最上位の CSS 宣言が終了していません

z-indexヘッダー CSS で宣言されていません。これを設定z-indexし、現在 に設定されている値よりも高い値であることを確認する必要がありますh2。常に一番上に表示されるようにするには、テスト目的で値を 1000 にします。

于 2013-06-01T18:08:57.443 に答える
0

z-index非static要素でのみ機能します。あなたは持っていposition: relativeますが、ポジショニングがないものは他にないので機能z-index: 2しh2ません。staticに期待する効果はh2？どの要素の上に配置しますか?

また、bu default absolute/ relative/staticは常にstatic同じレベルの要素の上に留まります。

于 2013-06-01T18:49:51.320 に答える