CODEWITHSUNDEEP
csshtmlz-index
Carlos Perez
Carlos Perez

Reputation: 122

Link not clickable with absolute positioning and z-index

I'm making a tumblr theme and have some elements placed on the page using absolute positioning and z-index's to control what stays on top of other elements. For some reason my links have become unclickable, I changed the z-index of the div which houses to content to a high number but it does not make them clickable. I can't figure out what the fault is in the code. Here's the CSS I have.

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;
    }

You can view the development page here http://secretmblrtheme.tumblr.com

Setup a jsFiddle here: http://jsfiddle.net/grngf/2/

Upvotes: 1

Views: 8940

Answers (1)

bondythegreat
bondythegreat

Reputation: 1409

based on your tumblr website, your #blogContent z-index is -1, which is stacked under #blogContentWrapper. try change it to 1, and increase other element's z-index that you want to put in front of it (if any)

Upvotes: 3

Related Questions