使用絕對定位和z-index鏈接無法單擊

Question

我正在制作一個tumblr主題，並使用絕對定位和z-index來在頁面上放置一些元素來控制保留在其他元素之上的內容。 由於某種原因，我的鏈接變得無法點擊，我將div的z-index更改為內容為高數字，但它不會使它們可點擊。 我無法弄清楚代碼中的錯誤是什么。 這是我的CSS。

p.blogPost { text-indent: 30pt; text-align: justify;
}
p.blogTags { 
    font-family: 'Lobster Two', cursive; 
    color: #de2424;
    text-align: right;
}
body { 
    font-family: 'Oxygen', sans-serif; 
    margin:0px; }
h1.postTitle { 
    font-family: 'Lobster Two', cursive; 
    color: #de2424; 
}
h2.dateText {
    font-family: 'Lobster Two', cursive;
    color: #f1e8da;
}
#container { 
    width: 940px; 
    margin: auto; }
#blogContentWrapper { 
    width:940px; 
    position:relative; 
    overflow: hidden; }
#blogHeaderRibbon { position: relative; top: 20px; z-index: 3;
    }
#blogBottomRibbon { position: relative; top:-190px; z-index: 3;
    }
#dateTab { position: relative; left: -50px; top: 90px; }
#dateText { position: relative; top: -93px; left: 10px; }
#blogContent { 
    position: relative;
    top: -83px;
    width: 780px; 
    margin: auto; 
    background-image: URL('images/eggshell.jpg');
    z-index:2;
    }
#blogPostContent { 
    padding: 30px; 
    z-index: 3;
    }

您可以在http://secretmblrtheme.tumblr.com查看開發頁面

在這里設置一個jsFiddle： http ： //jsfiddle.net/grngf/2/

Answer 1

根據您的tumblr網站，您的#blogContent z-index為-1，它位於#blogContentWrapper下。 嘗試將其更改為1，並增加要放在其前面的其他元素的z-index（如果有）