【问题标题】:Link not clickable with absolute positioning and z-index绝对定位和 z-index 无法点击链接
【发布时间】:2012-10-28 04:47:50
【问题描述】:

我正在制作一个 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/

【问题讨论】:

  • 关于滥用的评论已被 enhzflep 删除。 :)
  • 哈哈,那只是本地测试用的填充文本,我忘了我在那里写的。我的坏兄弟,无意冒犯任何人。
  • 没有戏剧。对不起公众的耳光。我对过去在源代码中留下其他类似的掘金感到内疚。 :-)
  • 没关系,我感谢我得到的所有帮助。
  • 这就是我所说的体育精神!为你们俩点赞

标签: css html z-index


【解决方案1】:

根据您的 tumblr 网站,您的 #blogContent z-index 为 -1,堆叠在 #blogContentWrapper 下。 尝试将其更改为 1,并增加要放在其前面的其他元素的 z-index(如果有)

【讨论】:

  • 现在检查一下,我把它改成了10,事实上它应该是最重要的。仍然无法点击。
  • 我检查了它的 z-index 为 10 的 #blogPostContent。它不会有帮助,因为容器 (#blogContent) 是相对的......它仍然是 -1。我的建议:尝试最小化位置(和 z-index)并尝试使用边距,因为我看到一些元素使用 unecesary 位置属性.. 恕我直言(但现在,让我们关注需要哪个 z-index改变)。
  • 这似乎可以使链接可点击,但后来我的问题出现了,我希望红色丝带在顶部,我使用 z-index 将蛋壳背景推到丝带下方。
  • 是的,不用担心,增加 #blogHeaderRibbon z-index 值,我认为 z-index 3 会有所帮助。 (ups,不:P ...将检查) 编辑:啊,我看到您在#blockContent 上放置了11 ..您需要知道z-index 是元素如何在页面中堆叠的值。因此,将一个元素设置为较大的 z-index 值会将其置于其他较低值元素的前面。尝试将 z-index: 12 放在#blogHeaderRibbon
猜你喜欢
  • 2012-03-29
  • 1970-01-01
  • 2013-02-09
  • 2013-05-19
  • 1970-01-01
  • 1970-01-01
  • 2012-11-27
  • 2013-10-18
  • 1970-01-01
相关资源
最近更新 更多