创建放置阴影时，我的锚点标记不可点击
创建放置阴影时，我的锚点标记不可点击
提问于 2012-12-03 01:23:37
我有下面的HTML和CSS，创建一个大的面板与一个下拉阴影，应该可以点击。但事实并非如此。我认为这是Z索引和相对定位的问题，但我想不出一种方法来使其工作而不丢失阴影。
http://jsfiddle.net/ddfAL/
HTML：
<div id="container">
<div class="drop-shadow"><a href="#">Click</a></div>
</div>CSS：
#container {
width: 500px;
height: 500px;
padding: 50px;
z-index: -10;
position: relative;
background-color: #bbb;
}
a {
display: block;
padding: 50px;
}
.drop-shadow {
position: relative;
color: #888;
background: #fdfdfd;
border: 1px solid #ccc;
-moz-box-shadow: inset 0 0 0 5px #f3f0e9, inset 0 0 13px rgba(0, 0, 0, 0.9);
-webkit-box-shadow: inset 0 0 0 5px #f3f0e9, inset 0 0 13px rgba(0, 0, 0, 0.9);
-o-box-shadow: inset 0 0 0 5px #f3f0e9, inset 0 0 13px rgba(0, 0, 0, 0.9);
box-shadow: inset 0 0 0 5px #f3f0e9, inset 0 0 13px rgba(0, 0, 0, 0.9);
}
.drop-shadow:before, .drop-shadow:after {
content: "";
position: absolute;
z-index: -1;
bottom: 15px;
left: 5px;
width: 50%;
height: 20%;
-moz-box-shadow: 0 15px 8px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 15px 8px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0 15px 8px rgba(0, 0, 0, 0.5);
box-shadow: 0 15px 8px rgba(0, 0, 0, 0.5);
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.drop-shadow:after {
right: 5px;
left: auto;
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
}
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-12-03 01:57:16
最简单的解决方法是添加这个CSS规则：
body {
position:relative;
z-index:-11;
}您可以考虑重组您的标记以避免使用负z-index，因为您将冒着对它们进行微观管理的风险(正如我们已经开始通过向<body>添加z-index所做的那样)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13671729
复制相关文章
相似问题
腾讯云开发者
