Question

在我的tumblr博客上，我使用的是自定义砌体主题，其中的帖子说明应位于永久链接页面中的帖子下方。首先它在帖子上滑动，不允许观众在永久链接页面中查看帖子。然后我降低了帖子笔记css的z-index，现在在帖子下面张贴笔记幻灯片。例如：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-------------------->

Answer 1

在链接页面上，如果我将top: 100%;添加到.prmlnk CSS，那么便笺会显示在帖子下方，而不是与帖子位于同一位置。

帖子笔记在Tumblr的固定链接页面上的帖子上滑动

1 个答案: