CODEWITHSUNDEEP
cssz-index
Kitsu
Kitsu

Reputation: 3

Z-Index and Opacity not working as expected

I'm trying to make a original tumblr blog theme. This is my first time writing one from scratch, although CSS is not new to me. Z-indexes, however...

In short, on each post, a menu (like, reblog etc buttons...) becomes visible when the cursor hovers over a post. Apologies if my code looks messy. header is the highest element on the entire page. Everything within h2 is the button menu, so it should be under header at all times.

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

I appreciate any help! Also feel free to give me any tips related to what you see above. Thanks!

Edit: HTML Markup for an example photoset post:

<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>

LIVE PREVIEW http://pianotheme.tumblr.com/

Upvotes: 0

Views: 3509

Answers (4)

ralph.m
ralph.m

Reputation: 14345

If the issue is just that the buttons and things overlap the top header when you scroll, simply put a high z-index on the #top element. E.g.

#top {
    z-index: 1000;
}

Upvotes: 0

Sourabh
Sourabh

Reputation: 8482

z-index works only on non static elements. You do have position: relative and z-index: 2 on h2 but it won't work as nothing else has non-static positioning. What effect are you expecting from h2? above which element do you want it to be?

Also, bu default absolute / relative / static will always stay above static element at same level.

Upvotes: 0

fletch
fletch

Reputation: 1641

Apply position:relative; to the #top header element with a z-index:999;.

Also, you want to make sure you don't have multiple DOM elements with the same id value. They should be unique within the DOM...otherwise, you can get some strange behavior.

Upvotes: 1

Kevin Lynch
Kevin Lynch

Reputation: 24713

You have not got a closing } on your top CSS declaration

You do not have any z-index declared in your header CSS. You should set z-index this and ensure it has a higher value to what is currently set to your h2. To ensure that it is always on top you could give it a value of 1000, for testing purposes.

Upvotes: 0

Related Questions