Z-Index and Opacity not working as expected - css

Question

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">∞</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/

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

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.