Question

我有以下HTML和CSS，创建一个带有投影的大面板，应该是可点击的。但事实并非如此。我认为这是Z索引和相对定位的问题，但我无法找到一种方法让它工作而不会丢失投影。

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

Answer 1

最简单的解决方法是添加此CSS规则：

body {
   position:relative;
   z-index:-11;
}

您可以考虑重新构建标记，以避免使用否定z-index，因为您可能会对其进行微观管理（我们已经开始通过向z-index添加<body>来开展此操作）

创建投影时，我的锚标记无法点击

1 个答案: