Post notes slides over the posts in Tumblr's permalink page

Question

On my tumblr blog, I am using a custom masonry theme, in which post notes should be below the post in the permalink pages. First it was sliding over the post, which don't let the viewers to view the post in permalink page. Then I lowered the z-index of the post notes css, now posts notes slides under the post. For example : Click here

#content {
    {block:IndexPage}
    width:66%;
    {/block:IndexPage}
     {block:PermalinkPage}
    width: 55%;
    {/block:PermalinkPage}
    top:170px;
    {block:IndexPage}
    left: 1%;
    {/block:IndexPage}
    {block:PermalinkPage}
    left: 10%;
    {/block:PermalinkPage}
    float: left; 
    position: absolute;
    border-right:1px solid #2b2b2b;
}
.entry {
    float:center;
    {block:indexpage}
    width: 43%;
    overflow:hidden;
    {/block:indexpage}
    margin: 2%; 
    {block:permalinkpage}
    width: 500px;
    {/block:permalinkpage}
    padding: 10px;
    background: {color:box};
    display: inline-block;
    position: relative;
    z-index:2;
    -webkit-border-radius:3px;
       -moz-border-radius:3px;
       border-radius:3px;
}
.entry img {
    display: block;
    width:auto;
    max-width: 100%;
}
.perma2, .perma2 a {
    margin-top: 5px; 
    font-family: 'Coda', sans-serif;
    font-size:15px; 
    color: #40c143;
}   
.prmlnk { 
    background:{color:box};
    font-size:15px; 
    margin-left:10px;
    margin-top:5px;
    width: 500px;
    padding: 10px;
    z-index:2;
    display: block; 
    overflow:hidden; 
    position: relative;
        -webkit-border-radius:3px;
       -moz-border-radius:3px;
       border-radius:3px;
}

.wrap {position: fixed; bottom:10px; left:0px;}
 
.wrap:hover .cred a {width: 130px; height: 20px; text-align: right;}
 
.cred a {
    height: 100%; width: 80px; height: 20px; margin-left:-65px;
    background-color: #000; font-size: 13px; text-align: right;
    overflow: hidden;
    z-index: 9999999; padding-top: 3px;
    top: -2px;
    color: #fff; padding-right: 5px;
    -moz-border-radius: 2px;
    border-radius:  2px;
    display: inline-block;
    text-transform: capitalize;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
     opacity: .7;
    filter: alpha(opacity = 70);
    font-family: 'Lato', sans-serif;
    line-spacing: 1px;
     }

ol.notes {
    padding: 0px;
    margin: 25px 0px;
   
    list-style-type: none;
    border-bottom: solid 1px #5a5a5a;
}

ol.notes li.note {
    border-top: solid 1px #5a5a5a;
    padding: 10px;
}

ol.notes li.note img.avatar {
    vertical-align: -4px;
    margin-right: 10px;
    width: 16px;
    height: 16px;
}

ol.notes li.note span.action {
    font-weight: normal;
    color:#f2f2f2;
}

ol.notes li.note .answer_content {
    font-weight: normal;
}

ol.notes li.note blockquote {
    border-color: #eee;
    padding: 4px 10px;
    margin: 10px 0px 0px 25px;
}

ol.notes li.note blockquote a {
    text-decoration: none;
}

<div id="content">
<div class="autopagerize_page_element">
{block:Posts}
<div class="entry">
  .....POSTS.....
 </div>
  
  {block:permalinkpage}{block:NoteCount}
<div class="prmlnk"><div class="perma2">
Posted: <a href="{Permalink}">{TimeAgo}</a> 
 {/block:NoteCount}
{block:PostNotes}
    {PostNotes}
{/block:PostNotes}
</div>
</div>
{/block:permalinkpage}
{/block:Posts}
</div> <!------------autopagerise page element ends here---------------->
  </div><!----------------------Content div ends here-------------------->

Max Starkenburg Max Starkenburg · Accepted Answer · 2016-05-23T20:47:13

On the linked page, if I add top: 100%; to the .prmlnk CSS, the notes then show up below the post instead of being in the same position as the post.

Post notes slides over the posts in Tumblr's permalink page

1 Answers