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（如果有的话）

使用绝对定位和z-index链接无法单击

1 个答案: