CSS ribbon over image

[Nezky]

Hello codingforums.com,

This is my first post so I hope I don't step on any rules here..

I am currently building a wordpress theme over at http://www.projectlightstyle.com/

And I want to have blogposts who just show a picture and no text (untill you click the picture and are linked to the post..)

Now, as you can see on the 2nd post (Hello world!) I have these ribbons for my blog post titles.. And I want them go above the pictures in the posts..

It's no problem to do that if my blog picture doesn't have the <a> tag, but as soon as I apply that.. It wont sit beneath the ribbon.. How can I fix this?

Here's my code for a blog post

<div id="post">
<h2 class="post"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2><div id="shadow"></div>
<div class="blog_picture"><?php the_content(); ?></div>
<div id="post_text"><p>Posted by Project Lightstyle</p> <p>0 Comments</p> <p>Genre: Dubstep</p> <p>15 March, 2011</p></div>
</div>
<?php endwhile; ?>
<?php endif; ?>

/***************** BLOG POSTS *****************/

#post {
margin-top: 6px;
margin-left: 6px;
margin-bottom: 26px;
width: 515px;
height: 198px;
float: left;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #cecece;
}

.blog_picture {
position: absolute;
width: 515px;
height: 177px;
}

p {
float: left;
padding-top: 3px;
padding-right: 44px;
font-family: arial;
font-size: 10px;
color: #979797;
}

h2 {
padding-right: 4px;
padding-top: 4px;
float: left;
width: 220px;
height: 20px;
text-align: right;
font-family: arial;
font-size: 14px;
font-weight: bold;
color: #2b2b2b;
background-color: #f4f4f4;
border: 1px solid #cecece;
}

h2.post {
margin-top: 10px;
margin-left: -15px;
}

#shadow {
background-image: url(img/post_title.png);
width: 10px;
height: 10px;
position: absolute;
margin-top: 36px;
margin-left: -16px;
}

[abduraooft]

The z-index won't work on elements that do not have position:absolute/relative. Set position:relative; to h2.post